import Link from 'next/link'

import { UserNav } from '../../../src/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
