import Link from "next/link";
import AppNav from "@/components/AppNav";

export type Crumb = { href?: string; label: string };

/**
 * The header the three browse levels share.
 *
 * app/mix/page.tsx writes its header inline, which is fine for one page. Three
 * copies of it would be two too many, and the breadcrumb is the only part that
 * differs between the levels.
 */
export default function BrowseHeader({
  crumbs,
  note,
  active = "browse",
}: {
  crumbs: Crumb[];
  note?: string;
  /** Which nav item is lit. Defaults to browse, which is the common case. */
  active?: string;
}) {
  return (
    <header className="flex flex-wrap items-center gap-3 border-b border-[var(--color-line)] bg-[var(--color-panel)] px-4 py-2">
      <AppNav active={active} />
      <nav className="flex items-center gap-1.5 text-[12px]" aria-label="Breadcrumb">
        {crumbs.map((c, i) => (
          <span key={`${c.label}-${i}`} className="flex items-center gap-1.5">
            {i > 0 && <span className="text-[var(--color-line)]">/</span>}
            {c.href ? (
              <Link href={c.href} className="text-[var(--color-dim)] hover:text-[var(--color-text)]">
                {c.label}
              </Link>
            ) : (
              <span className="text-[var(--color-text)]">{c.label}</span>
            )}
          </span>
        ))}
      </nav>
      {note && <div className="micro ml-auto">{note}</div>}
    </header>
  );
}