import Logo from './Logo'
import Link from 'next/link'
import Nav from './Nav'
import theme from '../../styles/theme'

const Header = () => (
  <header>
    <Logo />
    <Nav />

    <style jsx>{`
      header {
        position: relative;
        text-align: center;
        background-color: #efefef;
        width: 100%;
        z-index: 999;
        box-shadow: ${theme.bs};
      }

      @media screen and (min-width: 768px) {
        header {
          display: grid;
          grid-template-columns: 1fr auto minmax(670px, 1fr) 1fr;
        }

        header :global(.logo) {
          grid-column: 2;
        }

        header :global(nav) {
          grid-column: 3;
        }
      }
    `}</style>
  </header>
)

export default Header