Header Period

"use client";

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

export interface HeaderPeriodProps {
  title?: string;
  periods?: string[];
  defaultPeriod?: string;
  onPeriodChange?: (period: string) => void;
  className?: string;
}

/** Report header: serif title with an italic period word that updates, a pill period switcher (radio semantics) and a soft export button; a wavy divider underneath. */
export function HeaderPeriod({
  title = "Footprint",
  periods = ["This month", "This quarter", "This year", "All time"],
  defaultPeriod = "This year",
  onPeriodChange,
  className,
}: HeaderPeriodProps) {
  const [p, setP] = useState(defaultPeriod);
  return (
    <header className={cn("bg-da-bg text-da-fg", className)}>
      <div className="flex flex-wrap items-end justify-between gap-5 px-4 pt-8 pb-5 sm:px-8">
        <h1 className="font-da-display text-4xl">
          {title} <em className="text-da-primary">· {p.toLowerCase()}</em>
        </h1>
        <div className="flex flex-wrap items-center gap-3">
          <div role="radiogroup" aria-label="Period" className="flex flex-wrap gap-1 rounded-da-pill bg-da-surface-2 p-1">
            {periods.map((x) => (
              <button
                key={x}
                type="button"
                role="radio"
                aria-checked={x === p}
                onClick={() => {
                  setP(x);
                  onPeriodChange?.(x);
                }}
                className={cn(
                  "da-focus da-transition rounded-da-pill px-4 py-2 text-sm whitespace-nowrap",
                  x === p ? "bg-da-primary text-da-primary-fg" : "text-da-muted-fg hover:text-da-fg",
                )}
              >
                {x}
              </button>
            ))}
          </div>
          <button
            type="button"
            className="da-focus da-transition inline-flex h-11 items-center gap-2 rounded-da-pill bg-da-surface px-5 font-medium shadow-da-sm hover:shadow-da-md"
          >
            <Download aria-hidden className="size-4" /> Export
          </button>
        </div>
      </div>
      <svg aria-hidden viewBox="0 0 1200 12" preserveAspectRatio="none" className="block h-3 w-full text-da-border-strong">
        <path
          d="M0 6c50-6 100-6 150 0s100 6 150 0 100-6 150 0 100 6 150 0 100-6 150 0 100 6 150 0 100-6 150 0 100 6 150 0"
          fill="none"
          stroke="currentColor"
          strokeWidth="1.5"
          vectorEffect="non-scaling-stroke"
        />
      </svg>
    </header>
  );
}

export default HeaderPeriod;