Header Stats

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

export interface HeaderStatsProps {
  eyebrow?: string;
  title?: string;
  description?: string;
  stats?: { label: string; value: string; delta?: string }[];
  actions?: { label: string; href: string; primary?: boolean }[];
  className?: string;
}

export function HeaderStats({
  eyebrow = "Workspace · Acme Inc.",
  title = "Good morning, Maya.",
  description = "3 drafts are waiting for review and v4.2.1 goes out Monday at 9:00.",
  stats = [
    { label: "Views (30d)", value: "12.4k", delta: "+38%" },
    { label: "Subscribers", value: "8,214", delta: "+212" },
    { label: "Widget CTR", value: "18.4%", delta: "+2.1pt" },
    { label: "Drafts", value: "3" },
  ],
  actions = [
    { label: "Review drafts", href: "#drafts", primary: true },
    { label: "Open changelog", href: "#changelog" },
  ],
  className,
}: HeaderStatsProps) {
  return (
    <header className={cn("da-stroke-b bg-da-primary text-da-primary-fg", className)}>
      <div className="px-4 py-8 sm:px-8">
        <p className="font-da-mono text-xs font-bold tracking-da-label uppercase">{eyebrow}</p>
        <div className="mt-3 flex flex-col gap-6 lg:flex-row lg:items-end lg:justify-between">
          <div>
            <h1 className="font-da-display text-[clamp(2rem,4vw,3.25rem)] leading-none tracking-da-display uppercase">{title}</h1>
            <p className="mt-3 max-w-xl font-medium">{description}</p>
          </div>
          <div className="flex flex-wrap gap-3">
            {actions.map((a) => (
              <a
                key={a.label}
                href={a.href}
                className={cn(
                  "da-focus da-stroke px-4 py-2.5 font-bold shadow-da-sm hover:translate-x-[3px] hover:translate-y-[3px] hover:shadow-none",
                  a.primary ? "bg-da-fg text-da-bg" : "bg-da-surface text-da-surface-fg",
                )}
              >
                {a.label}
              </a>
            ))}
          </div>
        </div>
      </div>
      <dl className="da-stroke-t grid grid-cols-2 bg-da-surface text-da-surface-fg lg:grid-cols-4">
        {stats.map((s, i) => (
          <div key={s.label} className={cn("flex flex-col-reverse justify-end gap-1 px-4 py-4 sm:px-8", i % 2 === 1 && "da-stroke-l", i >= 2 && "da-stroke-t lg:border-t-0", i === 2 && "lg:da-stroke-l")}>
            <dt className="font-da-mono text-[11px] font-bold tracking-da-label text-da-muted-fg uppercase">{s.label}</dt>
            <dd className="flex items-baseline gap-2">
              <span className="font-da-display text-3xl tracking-da-display">{s.value}</span>
              {s.delta && <span className="da-stroke bg-da-success px-1 font-da-mono text-[11px] font-bold text-da-success-fg">{s.delta}</span>}
            </dd>
          </div>
        ))}
      </dl>
    </header>
  );
}

export default HeaderStats;