App Header

import type { ReactNode } from "react";
import { ChevronRight, Download, Plus } from "lucide-react";
import { cn } from "@/lib/utils";

export interface AppHeaderProps {
  breadcrumbs?: { label: string; href?: string }[];
  title?: string;
  description?: string;
  /** Replaces the default Export / New invoice actions. */
  actions?: ReactNode;
  meta?: { label: string; value: string }[];
  className?: string;
}

/** Page header for app screens: breadcrumb trail, title + description, right-aligned secondary/primary actions and an optional row of key-value meta; white with a bottom border. */
export function AppHeader({
  breadcrumbs = [{ label: "Receivables", href: "#receivables" }, { label: "Invoices" }],
  title = "Invoices",
  description = "Create, send and track invoices across all entities.",
  actions,
  meta = [
    { label: "Outstanding", value: "$412,880" },
    { label: "Overdue", value: "$70,350" },
    { label: "Avg. days to pay", value: "18.4" },
  ],
  className,
}: AppHeaderProps) {
  return (
    <header className={cn("border-b border-da-border bg-da-surface text-da-surface-fg", className)}>
      <div className="px-4 py-5 sm:px-6 lg:px-8">
        <nav aria-label="Breadcrumb">
          <ol className="flex flex-wrap items-center gap-1 text-sm text-da-muted-fg">
            {breadcrumbs.map((b, i) => (
              <li key={b.label} className="flex items-center gap-1">
                {i > 0 && <ChevronRight aria-hidden className="size-3.5" />}
                {b.href ? (
                  <a href={b.href} className="da-focus rounded-da-sm hover:text-da-fg">
                    {b.label}
                  </a>
                ) : (
                  <span aria-current="page" className="font-medium text-da-fg">
                    {b.label}
                  </span>
                )}
              </li>
            ))}
          </ol>
        </nav>
        <div className="mt-3 flex flex-wrap items-end justify-between gap-4">
          <div className="min-w-0">
            <h1 className="font-da-display text-2xl font-extrabold tracking-da-display">{title}</h1>
            {description && <p className="mt-1 text-sm text-da-muted-fg">{description}</p>}
          </div>
          <div className="flex flex-wrap gap-2">
            {actions ?? (
              <>
                <button
                  type="button"
                  className="da-focus da-stroke da-transition inline-flex h-9 items-center gap-2 rounded-da-md bg-da-surface px-3 text-sm font-semibold hover:border-da-border-strong"
                >
                  <Download aria-hidden className="size-4" /> Export
                </button>
                <button
                  type="button"
                  className="da-focus da-transition inline-flex h-9 items-center gap-2 rounded-da-md bg-da-primary px-3 text-sm font-semibold text-da-primary-fg hover:bg-da-primary/90"
                >
                  <Plus aria-hidden className="size-4" /> New invoice
                </button>
              </>
            )}
          </div>
        </div>
        {meta.length > 0 && (
          <dl className="mt-5 flex flex-wrap gap-x-8 gap-y-3 border-t border-da-border pt-4">
            {meta.map((m) => (
              <div key={m.label}>
                <dt className="text-xs text-da-muted-fg">{m.label}</dt>
                <dd className="mt-0.5 font-da-mono text-lg">{m.value}</dd>
              </div>
            ))}
          </dl>
        )}
      </div>
    </header>
  );
}

export default AppHeader;