import { ReactNode } from "react";

export type TableColumn<T extends Record<string, unknown>> = {
  key: keyof T | "actions" | string;
  header: string;
  render?: (row: T) => ReactNode;
};

type TableProps<T extends Record<string, unknown>> = {
  columns: TableColumn<T>[];
  data: T[];
  loading?: boolean;
  noDataText?: string;
};

export default function DataTable<T extends Record<string, unknown>>({
  columns,
  data,
  loading,
  noDataText = "No data"
}: TableProps<T>) {
  return (
    <div className="table-responsive">
      {loading && (
        <div className="py-4 text-center text-muted">Loading ...</div>
      )}
      {!loading && data.length === 0 && <div className="py-4 text-center text-muted">{noDataText}</div>}
      {!loading && data.length > 0 && (
        <table className="table table-striped table-hover">
          <thead>
            <tr>
              {columns.map((col) => (
                <th key={String(col.key)}>{col.header}</th>
              ))}
            </tr>
          </thead>
          <tbody>
            {data.map((row, idx) => (
              <tr key={String((row as { id?: string })?.id ?? idx)}>
                {columns.map((col) => (
                  <td key={String(col.key)} className="align-middle">
                    {col.render ? col.render(row) : String((row as Record<string, unknown>)[col.key as keyof T] ?? "-")}
                  </td>
                ))}
              </tr>
            ))}
          </tbody>
        </table>
      )}
    </div>
  );
}