Comparison Table

type Feature = { label: string; values: boolean[] };

const PLANS = ["Personal", "Enterprise"];
const FEATURES: Feature[] = [
  { label: "Unlimited projects", values: [true, true] },
  { label: "All components", values: [true, true] },
  { label: "Team-wide usage", values: [false, true] },
  { label: "Priority support", values: [false, true] },
];

export function ComparisonTable({
  plans = PLANS,
  features = FEATURES,
}: {
  plans?: string[];
  features?: Feature[];
}) {
  return (
    <div className="table-wrap">
      <table className="table">
        <thead>
          <tr><th>Feature</th>{plans.map((p) => <th key={p}>{p}</th>)}</tr>
        </thead>
        <tbody>
          {features.map((f) => (
            <tr key={f.label}>
              <td>{f.label}</td>
              {f.values.map((v, i) => (
                <td key={i}>
                  {v ? <span className="yes">✓</span> : <span className="no">—</span>}
                </td>
              ))}
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

/* ComparisonTable.css */
.table-wrap { width: 100%; border: 1px solid #e6e8ec; border-radius: 12px; overflow: hidden; background: #fff; }
.table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }
.table th { text-align: left; padding: 10px 14px; background: #fafafa; color: #a1a1a1; font-weight: 600; font-size: 12px; border-bottom: 1px solid #e6e8ec; }
.table td { padding: 10px 14px; border-bottom: 1px solid #e6e8ec; color: #1a1a1a; }
.table tr:last-child td { border-bottom: none; }
.yes { color: #15a06a; }
.no { color: #a1a1a1; }
@media (prefers-color-scheme: dark) {
  .table-wrap { border-color: #303030; background: #1a1a1a; }
  .table th { background: #242424; border-bottom-color: #303030; }
  .table td { border-bottom-color: #303030; color: #f5f5f5; }
  .yes { color: #34d399; }
}