Comparison

import { Fragment, type ReactNode } from "react";

// The parts every panel in this kit is made of. The corners of what is inside follow the panel's own.
const air = {
  panel: "flex w-(--tui-comparison-width) max-w-full flex-col gap-(--tui-comparison-gap) rounded-(--tui-comparison-radius) bg-(--tui-comparison-bg) p-(--tui-comparison-padding) font-(family-name:--tui-font) text-(length:--tui-comparison-font-size) leading-none text-(--tui-comparison-fg) shadow-(--tui-comparison-shadow)",
};

const inner = "calc(var(--tui-comparison-radius) - var(--tui-comparison-padding))";

export interface ComparisonProps {
  /** What the table compares, for a screen reader. */
  caption: string;
  /** A quiet label over the first column. */
  label?: ReactNode;
  /** The columns. One can be marked as the one to choose: its column is a tile from top to bottom. */
  plans: { name: ReactNode; featured?: boolean }[];
  /** The rows, in groups. A group with no title is a plain run of rows. */
  groups: { title?: ReactNode; rows: { label: ReactNode; /** One per plan: yes, no, or something to write. */ values: (boolean | string)[] }[] }[];
  className?: string;
}

function Value({ value }: { value: boolean | string }) {
  if (typeof value === "string") return <span className="font-medium tabular-nums">{value}</span>;
  return value ? (
    <>
      <svg aria-hidden viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="inline size-4">
            <path d="M3.500 8.500l3 3 6-7" />
          </svg>
      <span className="sr-only">Yes</span>
    </>
  ) : (
    <span className="inline-block h-0.5 w-2.5 rounded-full bg-(--tui-comparison-muted) align-middle opacity-50">
      <span className="sr-only">No</span>
    </span>
  );
}

/**
 * Plans side by side, feature by feature, in one floating panel. There are
 * no rules: the plan names are the quiet label row, the rows are kept apart
 * by room, and the plan to choose is a tile from top to bottom.
 */
export function Comparison({ caption, label, plans, groups, className }: ComparisonProps) {
  const total = groups.reduce((count, group) => count + group.rows.length, 0);
  let seen = 0;
  const column = (featured: boolean | undefined, first: boolean, last: boolean) => ({
    background: featured ? "var(--tui-comparison-well)" : undefined,
    borderRadius: featured ? [first ? inner : 0, first ? inner : 0, last ? inner : 0, last ? inner : 0].join(" ") : undefined,
  });
  return (
    <div data-slot="comparison" className={[air.panel, "overflow-x-auto", className].filter(Boolean).join(" ")}>
      <table className="w-full border-separate border-spacing-0">
        <caption className="sr-only">{caption}</caption>
        <thead>
          <tr>
            <th scope="col" className="h-10 px-3 text-left text-[0.93em] font-medium text-(--tui-comparison-muted)">
              {label}
            </th>
            {plans.map((plan, i) => (
              <th key={i} scope="col" style={column(plan.featured, true, false)} className={"h-10 w-[20%] min-w-24 px-3 text-center text-[0.93em] font-medium " + (plan.featured ? "text-(--tui-comparison-fg)" : "text-(--tui-comparison-muted)")}>
                {plan.name}
              </th>
            ))}
          </tr>
        </thead>
        <tbody>
          {groups.map((group, g) => (
            <Fragment key={g}>
              {group.title && (
                <tr data-slot="comparison-group">
                  <th scope="colgroup" className="h-9 px-3 pt-3 text-left align-middle text-[0.86em] font-medium text-(--tui-comparison-muted)">
                    {group.title}
                  </th>
                  {plans.map((plan, i) => (
                    <td key={i} style={column(plan.featured, false, false)} />
                  ))}
                </tr>
              )}
              {group.rows.map((row, r) => {
                const last = ++seen === total;
                return (
                  <tr key={r} data-slot="comparison-row">
                    <th scope="row" className="h-(--tui-comparison-row-height) px-3 text-left align-middle font-medium">
                      {row.label}
                    </th>
                    {plans.map((plan, i) => (
                      <td key={i} style={column(plan.featured, false, last)} className={"px-3 text-center align-middle " + (plan.featured ? "" : "text-(--tui-comparison-muted)")}>
                        <Value value={row.values[i] ?? false} />
                      </td>
                    ))}
                  </tr>
                );
              })}
            </Fragment>
          ))}
        </tbody>
      </table>
    </div>
  );
}

:root {
  color-scheme: light;
  --tui-bg: #ffffff;
  --tui-fg: #0a0a0a;
  --tui-muted: #f5f5f5;
  --tui-muted-fg: #737373;
  --tui-border: #e5e5e5;
  --tui-primary: #171717;
  --tui-primary-fg: #fafafa;
  --tui-ring: #a3a3a3;
  --tui-success: #16a34a;
  --tui-warning: #d97706;
  --tui-danger: #dc2626;
  --tui-radius: 8px;
  --tui-border-width: 1px;
  --tui-space: 4px;
  --tui-shadow: none;
  --tui-font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --tui-text: 14px;
  --tui-duration: 150ms;

  /* Comparison */
  --tui-comparison-width: 520px;
  --tui-comparison-padding: calc(var(--tui-space) * 2);
  --tui-comparison-gap: calc(var(--tui-space) * 1.5);
  --tui-comparison-radius: calc(var(--tui-radius) * 3.25);
  --tui-comparison-font-size: var(--tui-text);
  --tui-comparison-bg: light-dark(var(--tui-bg), color-mix(in oklab, var(--tui-bg) 90%, var(--tui-fg)));
  --tui-comparison-shadow: 0 0 0 1px color-mix(in srgb, var(--tui-fg) 5%, transparent), 0 2px 6px rgb(0 0 0 / 0.04), 0 16px 40px rgb(0 0 0 / 0.1);
  --tui-comparison-fg: var(--tui-fg);
  --tui-comparison-muted: var(--tui-muted-fg);
  --tui-comparison-well: color-mix(in srgb, light-dark(var(--tui-bg), color-mix(in oklab, var(--tui-bg) 90%, var(--tui-fg))) 94%, var(--tui-fg));
  --tui-comparison-row-height: calc(var(--tui-space) * 11);
}

.dark,
[data-theme="dark"] {
  color-scheme: dark;
  --tui-bg: #0a0a0a;
  --tui-fg: #fafafa;
  --tui-muted: #1c1c1c;
  --tui-muted-fg: #a3a3a3;
  --tui-border: #2a2a2a;
  --tui-primary: #fafafa;
  --tui-primary-fg: #171717;
  --tui-ring: #737373;
  --tui-success: #22c55e;
  --tui-warning: #f59e0b;
  --tui-danger: #ef4444;
}