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

import { UserNav } from '../components/user'

const Nav = () => (
  <>
    <nav>
      <ul>
        <li>
          <Link href='/'>
            <a>Home</a>
          </Link>
        </li>
        <li>
          <Link href='/archive'>
            <a>Archive</a>
          </Link>
        </li>
        <li>
          <Link href='/exercises'>
            <a>Exercises</a>
          </Link>
        </li>
        <li>
          <Link href='/polls'>
            <a>Polls</a>
          </Link>
        </li>
        <li>
          <UserNav />
        </li>
      </ul>
    </nav>

    <style jsx>
      {`
        ul {
          padding: 0 0.5em;
        }

        li {
          display: inline;
          margin: 0 0.5em;
        }
      `}
    </style>
  </>
)

export default Nav