Pricing compare

import * as React from "react";
import { CheckIcon, MinusIcon } from "lucide-react";
import { cn } from "@/lib/utils";

/** A cell value: true is included, false is not, a string is shown as text. */
type Cell = boolean | string;

type Group = {
  /** Group label, for example "Collaboration". */
  name: string;
  /** Rows in the group. `values` has one entry per plan, in plan order. */
  rows: { feature: string; values: Cell[] }[];
};

type PricingCompareProps = Omit<React.ComponentProps<"table">, "title"> & {
  /** Plan names, one per column. */
  plans: string[];
  /** Index of the plan to emphasise with a tinted column. */
  emphasised?: number;
  /** Feature groups, each a labelled block of rows. */
  groups: Group[];
  /** Visible caption above the table. Also names the table. */
  caption: string;
};

function CellValue({ value }: { value: Cell }) {
  if (value === true) {
    return (
      <>
        <CheckIcon className="mx-auto size-4 text-foreground" aria-hidden="true" />
        <span className="sr-only">Included</span>
      </>
    );
  }
  if (value === false) {
    return (
      <>
        <MinusIcon className="mx-auto size-4 text-muted-foreground/60" aria-hidden="true" />
        <span className="sr-only">Not included</span>
      </>
    );
  }
  return <span className="font-mono text-xs text-foreground/85">{value}</span>;
}

/**
 * A feature by plan comparison. Real table markup: a caption, column headers with scope="col",
 * one tbody per group and row headers with scope="row". Scrolls sideways on narrow screens.
 * Server component.
 */
export function PricingCompare({ plans, emphasised, groups, caption, className, ...props }: PricingCompareProps) {
  const tint = (i: number) => (i === emphasised ? "bg-muted/50" : undefined);
  return (
    <div data-slot="pricing-compare" className="relative w-full overflow-x-auto rounded-lg border bg-card">
      <table className={cn("w-full min-w-[32rem] border-collapse text-sm", className)} {...props}>
        <caption className="px-4 py-3 text-left text-sm font-medium text-foreground">{caption}</caption>
        <thead>
          <tr className="border-y">
            <th scope="col" className="w-2/5 px-4 py-2.5 text-left font-mono text-xs font-normal text-muted-foreground">
              Feature
            </th>
            {plans.map((p, i) => (
              <th
                key={i}
                scope="col"
                className={cn("px-4 py-2.5 text-center text-sm font-medium text-foreground", tint(i))}
              >
                {p}
              </th>
            ))}
          </tr>
        </thead>
        {groups.map((g, groupIndex) => (
          <tbody key={groupIndex} className="border-b last:border-b-0">
            <tr>
              <th
                scope="colgroup"
                colSpan={plans.length + 1}
                className="px-4 pt-4 pb-1.5 text-left font-mono text-xs font-normal tracking-wide text-muted-foreground uppercase"
              >
                {g.name}
              </th>
            </tr>
            {g.rows.map((r, rowIndex) => (
              <tr key={rowIndex} className="border-t border-border/60 first:border-t-0">
                <th scope="row" className="px-4 py-2.5 text-left font-normal text-foreground/85">
                  {r.feature}
                </th>
                {r.values.map((v, i) => (
                  <td key={i} className={cn("px-4 py-2.5 text-center", tint(i))}>
                    <CellValue value={v} />
                  </td>
                ))}
              </tr>
            ))}
          </tbody>
        ))}
      </table>
    </div>
  );
}

export type { Group, Cell };