// <Table> — a generic column-defined table, the shape the hive roster
// (name / domain / status chip, one row per hive) needs. Columns own
// their own cell rendering rather than this component knowing about
// any particular row shape, so it stays reusable for the swarm-wide
// agent roster later without a rewrite.
import type { ComponentChildren } from 'preact';
import './Table.css';

export interface TableColumn<T> {
  key: string;
  header: string;
  render: (row: T) => ComponentChildren;
}

export function Table<T>({
  columns,
  rows,
  rowKey,
}: {
  columns: TableColumn<T>[];
  rows: T[];
  rowKey: (row: T) => string;
}) {
  return (
    <table class="ui-table">
      <thead>
        <tr>
          {columns.map((c) => (
            <th key={c.key}>{c.header}</th>
          ))}
        </tr>
      </thead>
      <tbody>
        {rows.map((row) => (
          <tr key={rowKey(row)}>
            {columns.map((c) => (
              <td key={c.key}>{c.render(row)}</td>
            ))}
          </tr>
        ))}
      </tbody>
    </table>
  );
}