Header Progress

import { ChevronRight } from "lucide-react";
import { cn } from "@/lib/utils";

export interface HeaderProgressProps {
  breadcrumbs?: { label: string; href?: string }[];
  title?: string;
  description?: string;
  /** Progress toward target, 0–100. */
  progress?: number;
  target?: string;
  className?: string;
}

/** Page header with a target ring: soft breadcrumb, serif title and description, and on the right a circular progress ring (sage stroke on sand) with the percentage and target label. */
export function HeaderProgress({
  breadcrumbs = [{ label: "Plan", href: "#plan" }, { label: "2030 target" }],
  title = "Toward −42% by 2030",
  description = "You’ve secured 51 of 120 tCO₂e in reductions. Three more actions would put you on track.",
  progress = 43,
  target = "of target secured",
  className,
}: HeaderProgressProps) {
  const c = 2 * Math.PI * 34;
  return (
    <header className={cn("bg-da-bg px-4 py-8 text-da-fg sm:px-8", className)}>
      <div className="flex flex-wrap items-center gap-8 rounded-da-lg bg-da-surface p-6 text-da-surface-fg shadow-da-sm sm:p-8">
        <div className="min-w-[14rem] flex-1">
          <nav aria-label="Breadcrumb">
            <ol className="flex 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">{b.label}</span>
                  )}
                </li>
              ))}
            </ol>
          </nav>
          <h1 className="mt-3 font-da-display text-3xl sm:text-4xl">{title}</h1>
          <p className="mt-2 max-w-xl text-da-muted-fg">{description}</p>
        </div>
        <div className="flex items-center gap-4">
          <svg viewBox="0 0 80 80" className="size-24 -rotate-90" role="img" aria-label={`${progress}% ${target}`}>
            <circle cx="40" cy="40" r="34" fill="none" stroke="var(--da-surface-2)" strokeWidth="9" />
            <circle
              cx="40"
              cy="40"
              r="34"
              fill="none"
              stroke="var(--da-primary)"
              strokeWidth="9"
              strokeLinecap="round"
              strokeDasharray={`${(progress / 100) * c} ${c}`}
            />
          </svg>
          <p aria-hidden>
            <span className="block font-da-display text-4xl">{progress}%</span>
            <span className="block text-sm text-da-muted-fg">{target}</span>
          </p>
        </div>
      </div>
    </header>
  );
}

export default HeaderProgress;