"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import { cn } from "@/lib/utils";
import { de } from "@/lib/i18n/de";

/**
 * Sub-Navigation des Wehr-Bereichs. Client-Komponente nur wegen `usePathname`
 * (aktiver Zustand). Keine Geschäftslogik. Spiegelt die Admin-Navigation für
 * ein konsistentes Erscheinungsbild.
 */
const ITEMS = [
  { href: "/verwaltung/profil", label: de.verwaltung.navProfil },
  { href: "/verwaltung/fahrzeuge", label: de.verwaltung.navFahrzeuge },
  { href: "/verwaltung/geraete", label: de.verwaltung.navGeraete },
  { href: "/verwaltung/benutzer", label: de.verwaltung.navBenutzer },
] as const;

export function VerwaltungNav() {
  const pathname = usePathname();
  return (
    <nav
      aria-label="Wehr-Verwaltungsnavigation"
      className="border-b border-rand bg-white"
    >
      <div className="mx-auto flex max-w-5xl flex-wrap items-center gap-1 px-6 py-2">
        <span className="mr-4 font-display text-sm font-semibold text-navy">
          {de.verwaltung.titel}
        </span>
        {ITEMS.map((item) => {
          const active = pathname.startsWith(item.href);
          return (
            <Link
              key={item.href}
              href={item.href}
              aria-current={active ? "page" : undefined}
              className={cn(
                "rounded px-3 py-1.5 text-sm font-medium transition-colors",
                active
                  ? "bg-navy text-white"
                  : "text-anthrazit/80 hover:bg-nebel hover:text-anthrazit",
              )}
            >
              {item.label}
            </Link>
          );
        })}
      </div>
    </nav>
  );
}