import { cn } from "@/lib/utils";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
import type { DashboardTableColumn } from "./dashboard-home-types";

interface DashboardTableProps<T extends { id: string }> {
  columns: DashboardTableColumn<T>[];
  rows: T[];
  emptyMessage: string;
  className?: string;
}

export function DashboardTable<T extends { id: string }>({
  columns,
  rows,
  emptyMessage,
  className,
}: DashboardTableProps<T>) {
  if (!rows.length) {
    return (
      <div className={cn("rounded-xl border border-stroke p-8 text-center text-muted-foreground", className)}>
        {emptyMessage}
      </div>
    );
  }

  return (
    <div className={cn("overflow-x-auto rounded-xl border border-stroke", className)}>
      <Table className="w-full min-w-[920px] border-collapse bg-card">
        <TableHeader>
          <TableRow className="border-b border-stroke bg-highlights-bg hover:bg-highlights-bg">
            {columns.map((column) => (
              <TableHead
                key={column.key}
                className={cn(
                  "h-12 border-b border-stroke px-6 text-sm font-bold text-foreground",
                  column.headerClassName
                )}
              >
                {column.header}
              </TableHead>
            ))}
          </TableRow>
        </TableHeader>
        <TableBody>
          {rows.map((row, index) => (
            <TableRow
              key={row.id}
              className="border-b border-divider hover:bg-card last:border-b-0"
            >
              {columns.map((column) => (
                <TableCell
                  key={column.key}
                  className={cn("h-[72px] px-6 text-sm", column.cellClassName)}
                >
                  {column.render(row, index)}
                </TableCell>
              ))}
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </div>
  );
}