Tabla comparativa.

<div class="ui-sample ui-data" data-comparison-table="true"><table><caption>Comparación de planes</caption><thead><tr><th scope="col">Capacidad</th><th scope="col">Base</th><th scope="col">Equipo</th></tr></thead><tbody><tr><th scope="row">Usuarios</th><td>1</td><td>10</td></tr><tr><th scope="row">Exportaciones</th><td>50/mes</td><td>Ilimitadas</td></tr><tr><th scope="row">Soporte</th><td>Correo</td><td>Prioritario</td></tr></tbody></table></div>

<div class="ui-sample ui-data border border-slate-300 bg-white p-4 text-slate-950" data-comparison-table="true"><table class="w-full border-collapse text-left"><caption>Comparación de planes</caption><thead><tr><th class="border-b border-slate-300 p-2 align-top" scope="col">Capacidad</th><th class="border-b border-slate-300 p-2 align-top" scope="col">Base</th><th class="border-b border-slate-300 p-2 align-top" scope="col">Equipo</th></tr></thead><tbody><tr><th class="border-b border-slate-300 p-2 align-top" scope="row">Usuarios</th><td class="border-b border-slate-300 p-2 align-top">1</td><td class="border-b border-slate-300 p-2 align-top">10</td></tr><tr><th class="border-b border-slate-300 p-2 align-top" scope="row">Exportaciones</th><td class="border-b border-slate-300 p-2 align-top">50/mes</td><td class="border-b border-slate-300 p-2 align-top">Ilimitadas</td></tr><tr><th class="border-b border-slate-300 p-2 align-top" scope="row">Soporte</th><td class="border-b border-slate-300 p-2 align-top">Correo</td><td class="border-b border-slate-300 p-2 align-top">Prioritario</td></tr></tbody></table></div>

export interface ComparisonTableColumn {
  /** Encabezado de la columna: la capacidad en la primera, cada opción comparada en las siguientes. */
  label: string;
}

export interface ComparisonTableRow {
  /** Capacidad o atributo que se compara (`<th scope="row">`). */
  label: string;
  /** Valor de cada opción, en el orden de las columnas que siguen a la primera. */
  values: string[];
}

export interface ComparisonTableProps {
  /** Título de la tabla (`<caption>`). */
  caption?: string;
  /** Encabezados; el primero nombra la columna de capacidades. */
  columns?: ComparisonTableColumn[];
  rows?: ComparisonTableRow[];
  className?: string;
}

const COLUMNS: ComparisonTableColumn[] = [{ label: "Capacidad" }, { label: "Base" }, { label: "Equipo" }];

const ROWS: ComparisonTableRow[] = [
  { label: "Usuarios", values: ["1", "10"] },
  { label: "Exportaciones", values: ["50/mes", "Ilimitadas"] },
  { label: "Soporte", values: ["Correo", "Prioritario"] },
];

/**
 * Tabla comparativa: una fila por capacidad y una columna por opción (planes, versiones, proveedores); se usa para elegir entre dos o más alternativas.
 *
 * @example <ComparisonTable caption="Comparación de planes" rows={[{ label: "Exportaciones", values: ["100/mes", "Ilimitadas"] }]} />
 */
export function ComparisonTable({ caption = "Comparación de planes", columns = COLUMNS, rows = ROWS, className }: ComparisonTableProps) {
  if (!columns.length && !rows.length) return null;
  return (
    <div className={["ui-data", className].filter(Boolean).join(" ")} data-comparison-table>
      <table>
        {caption ? <caption>{caption}</caption> : null}
        {columns.length ? (
          <thead>
            <tr>
              {columns.map((column, i) => (
                <th scope="col" key={`${column.label}-${i}`}>{column.label}</th>
              ))}
            </tr>
          </thead>
        ) : null}
        {rows.length ? (
          <tbody>
            {rows.map((row, i) => (
              <tr key={`${row.label}-${i}`}>
                <th scope="row">{row.label}</th>
                {row.values.map((value, j) => (
                  <td key={j}>{value}</td>
                ))}
              </tr>
            ))}
          </tbody>
        ) : null}
      </table>
    </div>
  );
}