Pricing Matrix

import { Check, Minus } from "lucide-react";
import { cn } from "@/lib/utils";

export interface PricingMatrixProps {
  title?: string;
  plans?: string[];
  featured?: number;
  sections?: { title: string; rows: { label: string; values: (boolean | string)[] }[] }[];
  className?: string;
}

const DEFAULT_SECTIONS = [
  {
    title: "Receivables",
    rows: [
      { label: "Invoices per month", values: ["100", "Unlimited", "Unlimited"] },
      { label: "Automatic reminders", values: [true, true, true] },
      { label: "Customer portal", values: [false, true, true] },
    ],
  },
  {
    title: "Payments",
    rows: [
      { label: "Card & ACH", values: [true, true, true] },
      { label: "SEPA & SWIFT", values: [false, true, true] },
      { label: "Custom FX rates", values: [false, false, true] },
    ],
  },
  {
    title: "Controls & security",
    rows: [
      { label: "Approval workflows", values: [false, true, true] },
      { label: "SSO / SAML", values: [false, false, true] },
      { label: "Audit log retention", values: ["30 days", "1 year", "7 years"] },
    ],
  },
];

/** Enterprise feature matrix: sticky-looking header row of plans, grouped rows with section headings, checks/dashes/values and a tinted featured column. */
export function PricingMatrix({
  title = "Detailed plan comparison",
  plans = ["Starter", "Growth", "Enterprise"],
  featured = 1,
  sections = DEFAULT_SECTIONS,
  className,
}: PricingMatrixProps) {
  return (
    <section aria-labelledby="nc-matrix-title" className={cn("da-section bg-da-bg text-da-fg", className)}>
      <div className="da-container">
        <h2 id="nc-matrix-title" className="font-da-display text-[clamp(1.75rem,4vw,2.5rem)] font-extrabold tracking-da-display">
          {title}
        </h2>
        <div className="da-stroke mt-8 relative overflow-x-auto rounded-da-lg" tabIndex={0} role="region" aria-label="Plan comparison (scrollable)">
          <table className="w-full min-w-[640px] text-left text-[15px]">
            <caption className="sr-only">{title}</caption>
            <thead className="bg-da-surface-2">
              <tr className="border-b border-da-border">
                <td className="w-2/5 px-5 py-4" />
                {plans.map((p, i) => (
                  <th key={p} scope="col" className={cn("px-5 py-4 text-center font-da-display font-bold", i === featured && "bg-da-accent text-da-accent-fg")}>
                    {p}
                  </th>
                ))}
              </tr>
            </thead>
            {sections.map((s) => (
              <tbody key={s.title}>
                <tr className="border-b border-da-border bg-da-surface">
                  <th scope="colgroup" colSpan={plans.length + 1} className="px-5 pt-6 pb-2 text-xs font-semibold tracking-da-label text-da-muted-fg uppercase">
                    {s.title}
                  </th>
                </tr>
                {s.rows.map((r) => (
                  <tr key={r.label} className="border-b border-da-border bg-da-surface">
                    <th scope="row" className="px-5 py-3.5 font-normal">
                      {r.label}
                    </th>
                    {r.values.map((v, i) => (
                      <td key={i} className={cn("px-5 py-3.5 text-center", i === featured && "bg-da-accent/40")}>
                        {v === true ? (
                          <Check aria-label="Included" className="mx-auto size-4 text-da-primary" strokeWidth={3} />
                        ) : v === false ? (
                          <Minus aria-label="Not included" className="mx-auto size-4 text-da-muted-fg" />
                        ) : (
                          <span className="font-medium">{v}</span>
                        )}
                      </td>
                    ))}
                  </tr>
                ))}
              </tbody>
            ))}
          </table>
        </div>
      </div>
    </section>
  );
}

export default PricingMatrix;