import React from 'react'
import Link from 'next/link'

import { UserNav } from './user/user'
import theme from '../styles/theme'

const Nav = () => (
  <nav>
    <ul>
      <li>
        <Link href='/'>
          <a>Home</a>
        </Link>
      </li>
      <li>
        <Link href='/training'>
          <a>Training</a>
        </Link>
      </li>
      <li>
        <Link href='/login'>
          <a>Login</a>
        </Link>
      </li>
      <li>
        <Link href='/signup'>
          <a>Sign up</a>
        </Link>
      </li>
      <li id='user'>
        <UserNav />
      </li>
    </ul>

    <style jsx>
      {`
ul {
  display: grid;
}

li {
  padding: 0 0.5em;
  border-bottom: 1px solid ${theme.colors.lightgrey};
}

@media (min-width: 500px) {
  ul {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    border-bottom: 1px solid ${theme.colors.lightgrey};
  }
  li {
    display: inline;
    border-bottom: none;
  }
}

#search {
  grid-column-end: -2;
}

#user {
  grid-column-end: -1;
}
  `}
    </style>
  </nav>

)

export default Nav