text: import React from 'react';
  import userConfig from '../../../config';
  
  import Container from '../Container';
  import HeaderImage from '../HeaderImage';
  import Social from '../Social';
  import H1 from '../H1';
  import Link from './Link';
  import Wrapper from './Wrapper';
  
  function Header({ config }) {
    const { author, description, social } = config;
  
    return (
      <Container>
        <Wrapper>
          {userConfig.showHeaderImage && (
            <HeaderImage/>
          )}
          <H1><Link to="/">{author}</Link></H1>
          <p style={{ color: "white",
            display: "block",
            fontSize: "1.6em",
            margin: "50px 0 0 0",
            textAlign: "center"}}>{description}</p>
          {social &&
            <Social
              website={social.website}
              github={social.github}
              twitter={social.twitter}
              linkedin={social.linkedin}
            />
          }
        </Wrapper>
      </Container> 
    );
  }
  
  export default Header;