Header Title

"use client";

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

export interface HeaderTitleProps {
  title?: string;
  count?: number;
  filters?: string[];
  views?: string[];
  action?: { label: string; href: string };
  className?: string;
}

/** Big-title page header: a huge display title with a superscript mono count, then a ruled toolbar with text filters (slash separated, active underlined in signal) on the left and view options + ink action on the right. */
export function HeaderTitle({
  title = "Projects",
  count = 24,
  filters = ["All", "Published", "Drafts", "Archived"],
  views = ["Grid", "List"],
  action = { label: "New project", href: "#new" },
  className,
}: HeaderTitleProps) {
  const [f, setF] = useState(filters[0]);
  const [v, setV] = useState(views[0]);
  const group = (label: string, opts: string[], cur: string | undefined, set: (x: string) => void) => (
    <div role="radiogroup" aria-label={label} className="flex items-center gap-2 font-da-mono text-[11px] tracking-da-label uppercase">
      {opts.map((o, i) => (
        <span key={o} className="flex items-center gap-2">
          {i > 0 && (
            <span aria-hidden className="text-da-muted-fg">
              /
            </span>
          )}
          <button
            type="button"
            role="radio"
            aria-checked={o === cur}
            onClick={() => set(o)}
            className={cn(
              "da-focus rounded-da-sm border-b-2 pb-0.5",
              o === cur ? "border-da-accent text-da-fg" : "border-transparent text-da-muted-fg hover:text-da-fg",
            )}
          >
            {o}
          </button>
        </span>
      ))}
    </div>
  );
  return (
    <header className={cn("bg-da-bg px-4 pt-10 text-da-fg sm:px-8", className)}>
      <h1 className="font-da-display text-[clamp(3rem,9vw,7rem)] leading-[0.9] font-medium tracking-da-display">
        {title}
        <sup className="ml-2 align-top font-da-mono text-sm font-normal tracking-normal text-da-muted-fg">({count})</sup>
      </h1>
      <div className="mt-8 flex flex-wrap items-center justify-between gap-4 border-y border-da-border py-3">
        {group("Filter", filters, f, setF)}
        <div className="flex items-center gap-6">
          {group("View", views, v, setV)}
          <a
            href={action.href}
            className="da-focus 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"
          >
            {action.label}
          </a>
        </div>
      </div>
    </header>
  );
}

export default HeaderTitle;