import React from 'react'
import Logo from './svg/Logo'

const Header = ({ enableHeroText }) => (
  <div className="header mb4">
    <div className="header-content">
      <a href="/"><Logo /></a>
      { enableHeroText ? (<h2 className="mt3">Create and share beautiful images of your source code.<br/> Start typing, or drop a file into the text area to get started.</h2>) : null }
    </div>
    <style jsx>{`
      .header {
        width: 656px;
      }

      .header-content {
        display: flex;
        flex-direction: column;
        align-items: center;
      }

      .header-content a {
        height: 64px;
      }

      h2 {
        text-align: center;
      }
    `}</style>
  </div>
)

export default Header