App Header

import { cn } from "@/lib/utils";

export interface AppHeaderProps {
  path?: { label: string; href?: string }[];
  status?: string;
  updated?: string;
  primary?: { label: string; href: string };
  secondary?: { label: string; href: string };
  className?: string;
}

/** Path-style app header: slash-separated breadcrumb “Nord Studio / Projects / Oslo Opera” (last segment ink), live status with signal dot and last-edit time in mono, outline “Preview” and ink “Publish”. */
export function AppHeader({
  path = [{ label: "Nord Studio", href: "#site" }, { label: "Projects", href: "#projects" }, { label: "Oslo Opera" }],
  status = "Unpublished changes",
  updated = "Edited 2 min ago",
  primary = { label: "Publish", href: "#publish" },
  secondary = { label: "Preview", href: "#preview" },
  className,
}: AppHeaderProps) {
  return (
    <header className={cn("flex flex-wrap items-center gap-x-6 gap-y-3 border-b border-da-border bg-da-bg px-4 py-3 text-da-fg sm:px-6", className)}>
      <nav aria-label="Breadcrumb" className="w-full sm:w-auto sm:min-w-0 sm:flex-1">
        <ol className="flex flex-wrap items-center gap-x-2 text-[15px]">
          {path.map((p, i) => (
            <li key={p.label} className="flex items-center gap-2">
              {i > 0 && (
                <span aria-hidden className="text-da-muted-fg">
                  /
                </span>
              )}
              {p.href ? (
                <a href={p.href} className="da-focus rounded-da-sm text-da-muted-fg hover:text-da-fg">
                  {p.label}
                </a>
              ) : (
                <span aria-current="page" className="font-medium">
                  {p.label}
                </span>
              )}
            </li>
          ))}
        </ol>
      </nav>
      <p className="flex items-center gap-2 font-da-mono text-[11px] tracking-da-label text-da-muted-fg uppercase">
        <span aria-hidden className="size-1.5 rounded-full bg-da-accent" />
        {status} · {updated}
      </p>
      <div className="flex gap-2">
        <a
          href={secondary.href}
          className="da-focus da-transition inline-flex h-9 items-center rounded-da-sm border border-da-border-strong px-3 text-sm hover:bg-da-fg hover:text-da-bg"
        >
          {secondary.label}
        </a>
        <a
          href={primary.href}
          className="da-focus da-transition inline-flex h-9 items-center rounded-da-sm bg-da-primary px-3 text-sm font-medium text-da-primary-fg hover:opacity-85"
        >
          {primary.label}
        </a>
      </div>
    </header>
  );
}

export default AppHeader;