/**
 * BureauNav — slim breadcrumb bar present on every bureau sub-page.
 *
 * Pure breadcrumb now: ← home, the section pill, and the trail of crumbs.
 * The global primary nav, locale toggle and auth pill all live in
 * SiteHeader, which is rendered above BureauNav on every sub-page; that
 * stack is what gives the reader desktop access to /sightings, /witnesses,
 * etc. from anywhere, and what gives mobile users a single hamburger
 * instead of two stacked ones.
 */
import Link from "next/link";
import { ArrowLeft } from "lucide-react";
import { type Locale } from "./locale-toggle";

export interface Crumb {
  /** Display label. */
  label: string;
  /** When omitted the crumb is rendered as the current page (no link). */
  href?: string;
}

const COPY = {
  "pt-br": { home: "home", bureau: "casos", aria_home: "Voltar para a home", aria_bureau: "Listagem de casos" },
  en:      { home: "home", bureau: "case files", aria_home: "Back to home",  aria_bureau: "Case file library" },
} as const;

export function BureauNav({ crumbs, locale = "pt-br" }: { crumbs: Crumb[]; locale?: Locale }) {
  const t = COPY[locale];
  return (
    <nav
      aria-label={locale === "en" ? "Breadcrumb" : "Trilha"}
      className="sticky top-0 z-30 bg-[#0a0e1a]/95 backdrop-blur border-b border-[rgba(224,192,128,0.18)]"
    >
      <div className="mx-auto max-w-6xl px-4 py-2.5 flex items-center gap-3 flex-wrap text-[12px] font-mono">
        <Link
          href="/"
          className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full border border-[rgba(224,192,128,0.30)] text-[#cbd2dd] hover:text-[#e0c080] hover:bg-[rgba(224,192,128,0.08)] transition-colors"
          aria-label={t.aria_home}
        >
          <ArrowLeft size={12} aria-hidden="true" />
          <span>{t.home}</span>
        </Link>

        <Link
          href="/bureau"
          className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full border border-[rgba(224,192,128,0.50)] text-[#e0c080] hover:bg-[rgba(224,192,128,0.08)] transition-colors"
          aria-label={t.aria_bureau}
        >
          <span>{t.bureau}</span>
        </Link>

        {crumbs.length > 0 && (
          <div className="text-[11px] text-[#5a6678] flex items-center gap-1.5 flex-wrap">
            <span className="mx-1" aria-hidden="true">/</span>
            {crumbs.map((c, i) => (
              <span key={`${c.label}-${i}`} className="inline-flex items-center gap-1.5">
                {c.href ? (
                  <Link href={c.href} className="hover:text-[#e0c080] transition-colors">{c.label}</Link>
                ) : (
                  <span className="text-[#e7ecf3]" aria-current="page">{c.label}</span>
                )}
                {i < crumbs.length - 1 && <span aria-hidden="true">/</span>}
              </span>
            ))}
          </div>
        )}
      </div>
    </nav>
  );
}