import type { ReactNode } from "react";

export function DataTable<T>({
  rows,
  columns,
  keyFor,
  empty = "Nothing to show.",
}: {
  rows: T[];
  columns: Array<{ key: string; header: ReactNode; cell: (r: T) => ReactNode; className?: string }>;
  keyFor: (r: T) => string;
  empty?: string;
}) {
  return (
    <div className="overflow-x-auto">
      <table className="table">
        <thead>
          <tr>
            {columns.map((c) => (
              <th key={c.key} scope="col" className={c.className}>
                {c.header}
              </th>
            ))}
          </tr>
        </thead>
        <tbody>
          {rows.length === 0 ? (
            <tr>
              <td colSpan={columns.length} className="muted py-6 text-center">
                {empty}
              </td>
            </tr>
          ) : (
            rows.map((r) => (
              <tr key={keyFor(r)}>
                {columns.map((c) => (
                  <td key={c.key} className={c.className}>
                    {c.cell(r)}
                  </td>
                ))}
              </tr>
            ))
          )}
        </tbody>
      </table>
    </div>
  );
}