import { PropsWithChildren, ReactNode } from "react";

type Column = {
  key: string;
  label: string;
};

type TableProps<T> = {
  columns: Column[];
  rows: T[];
  renderCell: (row: T, column: Column) => ReactNode;
};

export function Table<T>({ columns, rows, renderCell }: PropsWithChildren<TableProps<T>>) {
  return (
    <div className="table-wrap">
      <table className="table">
        <thead>
          <tr>
            {columns.map((column) => (
              <th key={column.key}>{column.label}</th>
            ))}
          </tr>
        </thead>
        <tbody>
          {rows.map((row, index) => (
            <tr key={index}>
              {columns.map((column) => (
                <td key={column.key}>{renderCell(row, column)}</td>
              ))}
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}