Pricing Table

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

export interface PricingTableProps {
  title?: string;
  plans?: string[];
  featured?: number;
  rows?: { label: string; values: string[] }[];
  className?: string;
}

const DEFAULT_ROWS = [
  { label: "Price / month", values: ["€0", "€16", "€48"] },
  { label: "Sites", values: ["1", "3", "Unlimited"] },
  { label: "Projects", values: ["10", "Unlimited", "Unlimited"] },
  { label: "Custom domain", values: ["—", "Yes", "Yes"] },
  { label: "Custom fonts", values: ["—", "Yes", "Yes"] },
  { label: "Password pages", values: ["—", "Yes", "Yes"] },
  { label: "Team seats", values: ["1", "1", "5"] },
  { label: "Client handoff", values: ["—", "—", "Yes"] },
];

/** Plain typographic comparison table: ink header rule, mono column heads, hairline rows, em-dash for absent features, and the featured column marked with a signal dot. */
export function PricingTable({
  title = "Compare plans",
  plans = ["Personal", "Studio", "Agency"],
  featured = 1,
  rows = DEFAULT_ROWS,
  className,
}: PricingTableProps) {
  return (
    <section aria-labelledby="mc-ptab-title" className={cn("da-section bg-da-bg text-da-fg", className)}>
      <div className="da-container">
        <h2 id="mc-ptab-title" className="font-da-display text-[clamp(2rem,4vw,3rem)] leading-none font-medium tracking-da-display">
          {title}
        </h2>
        <div className="relative mt-10 overflow-x-auto" role="region" aria-label="Plan comparison (scrollable)" tabIndex={0}>
          <table className="w-full min-w-[560px] text-left text-[15px]">
            <caption className="sr-only">{title}</caption>
            <thead>
              <tr className="border-b border-da-border-strong">
                <td className="py-3" />
                {plans.map((p, i) => (
                  <th key={p} scope="col" className="py-3 font-da-mono text-xs font-normal tracking-da-label uppercase">
                    <span className="inline-flex items-center gap-2">
                      {i === featured && <span aria-hidden className="size-1.5 rounded-full bg-da-accent" />}
                      {p}
                    </span>
                  </th>
                ))}
              </tr>
            </thead>
            <tbody>
              {rows.map((r) => (
                <tr key={r.label} className="border-b border-da-border">
                  <th scope="row" className="py-3.5 pr-6 font-normal text-da-muted-fg">
                    {r.label}
                  </th>
                  {r.values.map((v, i) => (
                    <td key={i} className={cn("py-3.5", v === "—" ? "text-da-muted-fg" : "font-medium")}>
                      {v === "—" ? <span aria-label="Not included">—</span> : v}
                    </td>
                  ))}
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </section>
  );
}

export default PricingTable;