Comparison table

import * as React from "react";
import { CheckIcon, MinusIcon } from "lucide-react";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
import { cn } from "@/lib/utils";

export type ComparisonRow = {
  /** What is being compared, for example "Setup time". */
  label: string;
  /** What happens without it. Text, or a boolean for a plain mark. */
  without: string | boolean;
  /** What happens with it. Text, or a boolean for a plain mark. */
  with: string | boolean;
};

type ComparisonTableProps = Omit<React.ComponentProps<typeof Table>, "children"> & {
  rows: ComparisonRow[];
  /** Column heading for the left value column. */
  withoutLabel?: string;
  /** Column heading for the right value column. */
  withLabel?: string;
  /** Table caption, kept for screen readers. */
  caption?: string;
};

function Value({ value }: { value: string | boolean }) {
  if (typeof value === "string") return <>{value}</>;
  return value ? (
    <>
      <CheckIcon aria-hidden className="size-4 text-foreground" />
      <span className="sr-only">Yes</span>
    </>
  ) : (
    <>
      <MinusIcon aria-hidden className="size-4 text-muted-foreground" />
      <span className="sr-only">No</span>
    </>
  );
}

/**
 * A two-column comparison, without against with, in real table markup.
 * Server component. The "with" column is set in foreground, the other in muted, so the eye lands on the win.
 */
export function ComparisonTable({
  rows,
  withoutLabel = "Without",
  withLabel = "With",
  caption,
  className,
  ...props
}: ComparisonTableProps) {
  return (
    <Table data-slot="comparison-table" className={cn("min-w-0", className)} {...props}>
      {caption && <caption className="sr-only">{caption}</caption>}
      <TableHeader>
        <TableRow>
          <TableHead scope="col">
            <span className="sr-only">Compared on</span>
          </TableHead>
          <TableHead scope="col" className="whitespace-normal text-muted-foreground">
            {withoutLabel}
          </TableHead>
          <TableHead scope="col" className="whitespace-normal text-foreground">
            {withLabel}
          </TableHead>
        </TableRow>
      </TableHeader>
      <TableBody>
        {rows.map((row) => (
          <TableRow key={row.label}>
            <TableHead scope="row" className="font-medium whitespace-normal text-foreground">
              {row.label}
            </TableHead>
            <TableCell className="whitespace-normal text-muted-foreground">
              <span className="inline-flex items-center">
                <Value value={row.without} />
              </span>
            </TableCell>
            <TableCell className="font-medium whitespace-normal text-foreground">
              <span className="inline-flex items-center">
                <Value value={row.with} />
              </span>
            </TableCell>
          </TableRow>
        ))}
      </TableBody>
    </Table>
  );
}