import Head from 'next/head'
import Link from 'next/link'
import Logo from './logo'
import Navigation from './navigation'

export default function Header() {
  return (
    <>
      <Head>
        <title>Pfadi-Bussle</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <div className="my-3">
        <div className="flex flex-row items-center p-3 text-white bg-blue-800 rounded-t-sm">
          <h1 className="mr-3 flex-grow text-2xl">
            <Link href="/">
              <a className="font-extrabold">Pfadi-Bussle</a>
            </Link>
          </h1>
          <Logo className="w-40 flex-shrink-0" />
        </div>
        <Navigation />
      </div>
    </>
  )
}
