export interface VehicleTableProps {
  /** Column headings, e.g. ["HSN / TSN", "Marke & Fahrzeugtyp", "Baujahr", "PS / KW"]. */
  columns: string[];
  /** One string per column per row, in column order. Use "—" for unknown values, never invent them. */
  rows: string[][];
  /** Accessible table name. */
  ariaLabel?: string;
}

/**
 * Compatible-vehicles table (`.kwac-tablewrap` > `.kwac-table`): white rounded
 * panel, small uppercase column headings, hairline rows. Below 740px each row
 * becomes a stacked card and the column heading is repeated per cell via
 * `data-label`, so the table never overflows horizontally.
 */
export function VehicleTable({ columns, rows, ariaLabel = 'Passende Fahrzeuge' }: VehicleTableProps) {
  return (
    <div className="kwac-tablewrap">
      <table className="kwac-table" aria-label={ariaLabel}>
        <thead>
          <tr>
            {columns.map((c) => (
              <th key={c} scope="col">
                {c}
              </th>
            ))}
          </tr>
        </thead>
        <tbody>
          {rows.map((r, i) => (
            <tr key={i}>
              {r.map((cell, j) => (
                <td key={j} data-label={columns[j]}>
                  {cell}
                </td>
              ))}
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}