import React, { useContext } from 'react'
import Link from 'next/link'
import Image from 'next/image'
import UserContext from './user/context'

export default function Header({ label = 'Pfadi Bussle' }: { label?: string }) {
  const { username, role } = useContext(UserContext)
  return (
    <>
      <div className="flex flex-row items-center p-3 my-3 text-white bg-gray-600 rounded-sm">
        <h1 className="mr-3 flex-grow text-3xl">
          <Link href="/">{label}</Link>
        </h1>
        <Image
          src="/logo.webp"
          alt="Logo Freundeskreis VCP Rosenfeld"
          width="160"
          height="44"
        />
      </div>
      {username && (
        <div className="info-message">
          FYI, you are logged in as <strong className="ml-1">{username}</strong>
        </div>
      )}
    </>
  )
}