DataTable.tsx

import { StatusBadge } from './StatusBadge';

export interface Column<T> {
  key: keyof T | string;
  label: string;
  render?: (row: T) => React.ReactNode;
  isStatus?: boolean;
}

export function DataTable<T extends { id: string }>({
  columns,
  rows,
  loading,
  error,
  emptyLabel = 'No records yet.',
}: {
  columns: Column<T>[];
  rows: T[];
  loading: boolean;
  error: string | null;
  emptyLabel?: string;
}) {
  if (loading) {
    return <div className="p-8 text-center text-ink-soft text-sm">Loading…</div>;
  }
  if (error) {
    return (
      <div className="p-8 text-center text-sm text-red-700 bg-red-50 rounded-xl border border-red-100">
        Could not load data: {error}
      </div>
    );
  }
  if (rows.length === 0) {
    return <div className="p-10 text-center text-ink-soft text-sm bg-white rounded-xl border border-ink/5">{emptyLabel}</div>;
  }

  return (
    <div className="overflow-x-auto bg-white rounded-xl border border-ink/5">
      <table className="w-full text-sm">
        <thead>
          <tr className="bg-surface text-left">
            {columns.map((col) => (
              <th key={String(col.key)} className="px-4 py-3 font-display font-semibold text-ink border-b border-ink/5">
                {col.label}
              </th>
            ))}
          </tr>
        </thead>
        <tbody>
          {rows.map((row) => (
            <tr key={row.id} className="border-b border-ink/5 last:border-0 hover:bg-surface/60">
              {columns.map((col) => (
                <td key={String(col.key)} className="px-4 py-3 align-top">
                  {col.isStatus ? (
                    <StatusBadge status={(row as Record<string, unknown>)[col.key as string] as string} />
                  ) : col.render ? (
                    col.render(row)
                  ) : (
                    String((row as Record<string, unknown>)[col.key as string] ?? 'Not provided')
                  )}
                </td>
              ))}
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}