'use client';

import Link from 'next/link';
import { usePathname } from 'next/navigation';
import { ThemaUmschalter } from './ThemaUmschalter';

export type Navigationseintrag = { pfad: string; titel: string };

export function Kopfzeile({
  eintraege,
  name,
  rolle,
  abmeldeAktion,
}: {
  eintraege: Navigationseintrag[];
  name: string;
  rolle: string;
  abmeldeAktion: () => Promise<void>;
}) {
  const pfad = usePathname();

  function istAktiv(ziel: string): boolean {
    if (ziel === '/') return pfad === '/';
    return pfad === ziel || pfad.startsWith(`${ziel}/`);
  }

  return (
    <header className="kopf">
      <div className="kopf-innen">
        <Link href="/" className="marke">
          Lern<span className="marke-akzent">-Bar</span>
        </Link>

        <nav className="hauptnavigation" aria-label="Hauptbereiche">
          {eintraege.map((e) => (
            <Link key={e.pfad} href={e.pfad} aria-current={istAktiv(e.pfad) ? 'page' : undefined}>
              {e.titel}
            </Link>
          ))}
        </nav>

        <div className="kopf-rechts">
          <span className="leise" style={{ color: '#cfe2e9', fontSize: '0.85rem' }} title={`${name} – ${rolle}`}>
            {name} · {rolle}
          </span>
          <ThemaUmschalter />
          <form action={abmeldeAktion}>
            <button type="submit" className="kopf-knopf">
              Abmelden
            </button>
          </form>
        </div>
      </div>
    </header>
  );
}