import Head from 'next/head'
import Link from 'next/link'
import User from './user'

export default function Header() {
  return (
    <>
      <Head>
        <title>Pfadi-Bussle</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <div className="relative bg-white">
        <div className="max-w-7xl mx-auto px-4 sm:px-6">
          <div className="flex justify-between items-center border-b-2 border-gray-100 py-6 md:justify-start md:space-x-10">
            <div className="flex justify-start lg:w-0 flex-1">
              <Link href="/">
                <a className="text-lg tracking-tight font-extrabold text-blue-800 sm:text-xl md:text-2xl">
                  Pfadi-Bussle
                </a>
              </Link>
            </div>
            <nav className="hidden space-x-10 sm:flex">
              <Link href="/book">
                <a className="text-base font-medium text-gray-500 hover:text-gray-900">
                  Buchungsanfrage
                </a>
              </Link>
              <Link href="/prices">
                <a className="text-base font-medium text-gray-500 hover:text-gray-900">
                  Preise
                </a>
              </Link>
              <Link href="/terms">
                <a className="text-base font-medium text-gray-500 hover:text-gray-900">
                  Mitbedingungen
                </a>
              </Link>
            </nav>
            <nav className="sm:hidden">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="24"
                fill="none"
                viewBox="0 0 24 24"
                stroke="currentColor"
              >
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  strokeWidth={2}
                  d="M4 6h16M4 12h16M4 18h16"
                />
              </svg>
            </nav>
            <User />
          </div>
        </div>
      </div>
    </>
  )
}
