export interface SpecRow {
  label: string;
  value: string;
}

export interface SpecColumnProps {
  /** Panel heading, underlined with a 1px ink rule. */
  title: string;
  /** Label/value pairs; values are right-aligned and semibold. */
  rows: SpecRow[];
}

/**
 * White spec panel (`.kwac-spec-col`) with a heading and a two-column key/value
 * table (`.kwac-spec-table`): muted labels left, semibold values right,
 * hairlines between rows. Child of `SpecGrid`.
 */
export function SpecColumn({ title, rows }: SpecColumnProps) {
  return (
    <div className="kwac-spec-col">
      <h3>{title}</h3>
      <table className="kwac-spec-table">
        <tbody>
          {rows.map((r) => (
            <tr key={r.label}>
              <th scope="row">{r.label}</th>
              <td>{r.value}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}