Pricing Compare

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

export interface PricingCompareProps {
  title?: string;
  plans?: { name: string; price: string; featured?: boolean }[];
  rows?: { label: string; values: (boolean | string)[] }[];
  className?: string;
}

const DEFAULT_ROWS = [
  { label: "Members", values: ["5", "Unlimited", "Unlimited"] },
  { label: "Boards", values: ["3", "Unlimited", "Unlimited"] },
  { label: "Weekly view", values: [true, true, true] },
  { label: "Recurring tasks", values: [false, true, true] },
  { label: "Free guests", values: [false, true, true] },
  { label: "Workload view", values: [false, false, true] },
  { label: "SSO & admin", values: [false, false, true] },
  { label: "Support", values: ["Help center", "Email", "Priority chat"] },
];

/** Rounded comparison table with soft zebra rows, round check/dash badges and a lavender-highlighted featured column; scrolls on mobile. */
export function PricingCompare({
  title = "Compare plans",
  plans = [
    { name: "Sprout", price: "Free" },
    { name: "Bloom", price: "$6", featured: true },
    { name: "Forest", price: "$11" },
  ],
  rows = DEFAULT_ROWS,
  className,
}: PricingCompareProps) {
  return (
    <section aria-labelledby="sf-compare-title" className={cn("da-section bg-da-bg text-da-fg", className)}>
      <div className="da-container">
        <h2 id="sf-compare-title" className="text-center font-da-display text-[clamp(2rem,4.5vw,3rem)] font-extrabold tracking-da-display">
          {title}
        </h2>
        <div
          className="mx-auto mt-10 max-w-4xl overflow-x-auto rounded-da-lg bg-da-surface p-2 shadow-da-sm"
          tabIndex={0}
          role="region"
          aria-label="Plan comparison (scrollable)"
        >
          <table className="w-full min-w-[560px] border-separate border-spacing-0 text-[15px]">
            <caption className="sr-only">Features by plan</caption>
            <thead>
              <tr>
                <td className="w-2/5" />
                {plans.map((p) => (
                  <th key={p.name} scope="col" className={cn("rounded-t-da-md px-4 py-5 text-center font-normal", p.featured && "bg-da-primary/12")}>
                    <span className="block font-da-display text-xl font-extrabold">{p.name}</span>
                    <span className="text-sm text-da-muted-fg">{p.price === "Free" ? "Free" : `${p.price} / member`}</span>
                  </th>
                ))}
              </tr>
            </thead>
            <tbody>
              {rows.map((r, i) => (
                <tr key={r.label} className={cn(i % 2 === 0 && "[&>*:not(.is-featured)]:bg-da-surface-2")}>
                  <th scope="row" className="rounded-l-da-md px-4 py-3.5 text-left font-medium">
                    {r.label}
                  </th>
                  {r.values.map((v, k) => (
                    <td
                      key={k}
                      className={cn(
                        "px-4 py-3.5 text-center",
                        plans[k]?.featured && "is-featured bg-da-primary/12",
                        k === r.values.length - 1 && "rounded-r-da-md",
                      )}
                    >
                      {v === true ? (
                        <span className="mx-auto grid size-6 place-items-center rounded-full bg-da-secondary text-da-secondary-fg">
                          <Check aria-label="Included" className="size-3.5" strokeWidth={3} />
                        </span>
                      ) : v === false ? (
                        <span className="mx-auto grid size-6 place-items-center rounded-full bg-da-muted text-da-muted-fg">
                          <Minus aria-label="Not included" className="size-3.5" />
                        </span>
                      ) : (
                        <span className="font-medium">{v}</span>
                      )}
                    </td>
                  ))}
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </section>
  );
}

export default PricingCompare;