import React, { useContext } from 'react'
import Head from 'next/head'
import Link from 'next/link'
import UserContext from './user/context'
import Logo from './logo'

export default function Header({ label }: { label?: string }) {
  const { username, role } = useContext(UserContext)
  return (
    <>
      <Head>
        <title>Pfadi-Bussle {label}</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>
        {label && (
          <div className="flex flex-row items-center px-3 py-1 text-white text-base bg-blue-400 rounded-b-sm">
            {username === 'admin' && (
              <div className="font-extrabold bg-red-400 px-2 py-1 mr-3 rounded-sm">
                Admin
              </div>
            )}
            <>
              <h2 className="mr-1">
                <Link href="/">
                  <a className="font-extrabold">Home</a>
                </Link>
              </h2>
              {'>'}
              <h2 className="mx-1 flex-grow">
                <span className="font-extrabold">{label}</span>
              </h2>
            </>
          </div>
        )}
      </div>
    </>
  )
}
