import { Link } from "gatsby"
import PropTypes from "prop-types"
import React from "react"

const Header = ({ siteTitle }) => (
  <header
    style={{
      // background: `rebeccapurple`,
      marginBottom: `1.45rem`,
    }}
  >
    <div
      style={{
        margin: `0 auto`,
        // maxWidth: 1024,
        padding: `1.45rem 1.0875rem`,
      }}
    >
      <h1 className="siteHeader" style={{
        margin: 0,
        fontSize: `1rem`
      }}>
        <Link
          to="/"
          style={{
            color: `#292929`,
            textDecoration: `none`,
          }}
        >
          {siteTitle.toUpperCase()}
        </Link>
      </h1>
    </div>
  </header>
)

Header.propTypes = {
  siteTitle: PropTypes.string,
}

Header.defaultProps = {
  siteTitle: ``,
}

export default Header
