import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import { cn } from "@/lib/utils";
import { ReactNode } from "react";

export interface DataTableColumn<T> {
  key: keyof T | string;
  header: string;
  render?: (item: T, index: number) => ReactNode;
  className?: string;
  headerClassName?: string;
}

interface DataTableProps<T> {
  data: T[];
  columns: DataTableColumn<T>[];
  keyExtractor: (item: T, index: number) => string | number;
  alternateRowBg?: boolean;
  className?: string;
  headerClassName?: string;
  rowClassName?: string | ((item: T, index: number) => string);
}

export function DataTable<T>({
  data,
  columns,
  keyExtractor,
  alternateRowBg = true,
  className,
  headerClassName,
  rowClassName,
}: DataTableProps<T>) {
  const getRowClassName = (item: T, index: number): string => {
    const base = "border-b border-border";
    const alternate =
      alternateRowBg && index % 2 === 1 ? "bg-muted/30 dark:bg-muted/20" : "";
    const custom =
      typeof rowClassName === "function"
        ? rowClassName(item, index)
        : rowClassName || "";
    return cn(base, alternate, custom);
  };

  return (
    <div
      className={cn(
        "bg-card rounded-lg border border-border overflow-hidden",
        className
      )}
    >
      <Table>
        <TableHeader>
          <TableRow
            className={cn(
              "bg-muted/50 hover:bg-muted/50",
              headerClassName
            )}
          >
            {columns.map((column) => (
              <TableHead
                key={String(column.key)}
                className={cn(
                  "text-start font-bold",
                  column.headerClassName
                )}
              >
                {column.header}
              </TableHead>
            ))}
          </TableRow>
        </TableHeader>
        <TableBody>
          {data.map((item, index) => (
            <TableRow
              key={keyExtractor(item, index)}
              className={getRowClassName(item, index)}
            >
              {columns.map((column) => (
                <TableCell
                  key={String(column.key)}
                  className={cn(
                    "text-start",
                    column.className
                  )}
                >
                  {column.render
                    ? column.render(item, index)
                    : String(item[column.key as keyof T] ?? "")}
                </TableCell>
              ))}
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </div>
  );
}