Pricing Table

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

export interface PricingTablePlan {
  name: string;
  price: string;
  unit?: string;
  cta: { label: string; href: string };
  featured?: boolean;
}

export interface PricingTableRow {
  label: string;
  /** One value per plan: true = included, false = not included, string = value. */
  values: (boolean | string)[];
}

export interface PricingTableGroup {
  title: string;
  rows: PricingTableRow[];
}

export interface PricingTableProps {
  eyebrow?: string;
  title?: string;
  plans?: PricingTablePlan[];
  groups?: PricingTableGroup[];
  className?: string;
}

const DEFAULT_PLANS: PricingTablePlan[] = [
  { name: "Free", price: "$0", unit: "up to 5 users", cta: { label: "Start free", href: "#free" } },
  { name: "Team", price: "$19", unit: "per user / month", cta: { label: "Start trial", href: "#team" }, featured: true },
  { name: "Business", price: "$39", unit: "per user / month", cta: { label: "Start trial", href: "#business" } },
  { name: "Enterprise", price: "Custom", unit: "annual contract", cta: { label: "Contact sales", href: "#sales" } },
];

const DEFAULT_GROUPS: PricingTableGroup[] = [
  {
    title: "Alerting & on-call",
    rows: [
      { label: "Integrations", values: ["5", "Unlimited", "Unlimited", "Unlimited"] },
      { label: "Phone & SMS notifications", values: [false, true, true, true] },
      { label: "Rotations & schedules", values: ["1", "Unlimited", "Unlimited", "Unlimited"] },
      { label: "Escalation policies", values: [true, true, true, true] },
    ],
  },
  {
    title: "Incident response",
    rows: [
      { label: "Slack & Teams war rooms", values: [true, true, true, true] },
      { label: "Status pages", values: ["1 public", "3", "Unlimited", "Unlimited"] },
      { label: "AI postmortems", values: [false, false, true, true] },
      { label: "Workflows & automations", values: [false, "10", "Unlimited", "Unlimited"] },
    ],
  },
  {
    title: "Security & support",
    rows: [
      { label: "SSO / SAML", values: [false, false, true, true] },
      { label: "SCIM & audit logs", values: [false, false, false, true] },
      { label: "Data residency (EU / US)", values: [false, false, false, true] },
      { label: "Support", values: ["Community", "Email", "Priority", "Dedicated TAM"] },
    ],
  },
];

function Cell({ value }: { value: boolean | string }) {
  if (value === true) return <Check aria-label="Included" className="mx-auto size-4 text-da-accent-fg" />;
  if (value === false) return <Minus aria-label="Not included" className="mx-auto size-4 text-da-muted-fg/60" />;
  return <span>{value}</span>;
}

/** Full feature-comparison table: sticky plan header, grouped rows, check/dash/values; scrolls horizontally on mobile. */
export function PricingTable({
  eyebrow = "Compare plans",
  title = "Find the plan that fits your on-call",
  plans = DEFAULT_PLANS,
  groups = DEFAULT_GROUPS,
  className,
}: PricingTableProps) {
  return (
    <section aria-labelledby="pricing-table-title" className={cn("da-section bg-da-bg text-da-fg", className)}>
      <div className="da-container">
        <div className="max-w-2xl">
          <p className="font-da-mono text-xs text-da-accent-fg">{eyebrow}</p>
          <h2 id="pricing-table-title" className="mt-3 text-[clamp(1.875rem,4vw,2.75rem)] leading-[1.1] font-semibold tracking-da-display text-balance">
            {title}
          </h2>
        </div>
        <div className="mt-12 overflow-x-auto" tabIndex={0} role="region" aria-label="Plan comparison (scrollable)">
          <table className="w-full min-w-[720px] border-collapse text-sm">
            <caption className="sr-only">Features included in each plan</caption>
            <thead>
              <tr>
                <td className="w-[28%]" />
                {plans.map((p) => (
                  <th key={p.name} scope="col" className={cn("px-4 pb-6 text-center align-bottom font-normal", p.featured && "rounded-t-da-lg bg-da-surface-2")}>
                    <span className="flex items-center justify-center gap-2 pt-4 text-[15px] font-medium">
                      {p.name}
                      {p.featured && <span className="rounded-da-pill bg-da-primary px-2 py-0.5 text-[11px] text-da-primary-fg">Popular</span>}
                    </span>
                    <span className="mt-2 block text-2xl font-semibold tracking-tight">{p.price}</span>
                    <span className="block text-[12px] text-da-muted-fg">{p.unit}</span>
                    <a
                      href={p.cta.href}
                      className={cn(
                        "da-focus da-transition mt-4 flex h-8 items-center justify-center rounded-da-md text-[13px] font-medium",
                        p.featured ? "bg-da-primary text-da-primary-fg hover:bg-da-primary/90" : "da-stroke bg-da-surface hover:bg-da-muted",
                      )}
                    >
                      {p.cta.label}
                    </a>
                  </th>
                ))}
              </tr>
            </thead>
            {groups.map((g) => (
              <tbody key={g.title}>
                <tr>
                  <th scope="colgroup" colSpan={plans.length + 1} className="border-b border-da-border pt-8 pb-3 text-left text-[13px] font-medium">
                    {g.title}
                  </th>
                </tr>
                {g.rows.map((r) => (
                  <tr key={r.label} className="border-b border-da-border">
                    <th scope="row" className="py-3 pr-4 text-left font-normal text-da-muted-fg">
                      {r.label}
                    </th>
                    {r.values.map((v, i) => (
                      <td key={i} className={cn("px-4 py-3 text-center", plans[i]?.featured && "bg-da-surface-2")}>
                        <Cell value={v} />
                      </td>
                    ))}
                  </tr>
                ))}
              </tbody>
            ))}
          </table>
        </div>
      </div>
    </section>
  );
}

export default PricingTable;