import { EmptyState, Table, TableCell, TableHead, TableRow } from './ui';

export function EntityTable(props: {
  columns: string[];
  empty: string;
  rows: Array<Array<string | number>>;
}) {
  return (
    <Table>
      <TableRow className="shTableHeader">
        {props.columns.map((column) => (
          <TableHead key={column}>{column}</TableHead>
        ))}
      </TableRow>
      {props.rows.map((row, index) => (
        <TableRow key={index}>
          {row.map((cell, cellIndex) => (
            <TableCell key={`${index}-${cellIndex}`}>{cell}</TableCell>
          ))}
        </TableRow>
      ))}
      {!props.rows.length && <EmptyState title={props.empty} />}
    </Table>
  );
}