import React, { type ReactNode } from 'react';
import {
  Table as BaseTable,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from './BaseTable';

type ColumnConfig<T> = {
  accessorKey: keyof T;
  header: string | ReactNode;
  cell?: (value: T[keyof T], row: T) => ReactNode;
  className?: string;
};

type TableProps<T> = {
  data: T[];
  columns: ColumnConfig<T>[];
  className?: string;
};

function Table<T extends Record<string, unknown>>({
  data,
  columns,
  className = '',
}: TableProps<T>) {
  return (
    <BaseTable className={className}>
      <TableHeader>
        <TableRow>
          {columns.map((column, index) => (
            <TableHead key={index} className={column.className}>
              {column.header}
            </TableHead>
          ))}
        </TableRow>
      </TableHeader>
      <TableBody>
        {data.map((row, rowIndex) => (
          <TableRow key={rowIndex}>
            {columns.map((column, cellIndex) => (
              <TableCell key={cellIndex} className={column.className}>
                {column.cell
                  ? column.cell(row[column.accessorKey], row)
                  : (row[column.accessorKey] as ReactNode)}
              </TableCell>
            ))}
          </TableRow>
        ))}
      </TableBody>
    </BaseTable>
  );
}

export {
  Table,
  TableHeader,
  TableBody,
  TableHead,
  TableRow,
  TableCell,
  type ColumnConfig,
  type TableProps,
};
