import type { ReactNode } from "react";
import { EmptyState } from "@/components/atoms/empty-state";

interface Column<T> {
  key: string;
  header: string;
  render: (item: T) => ReactNode;
  className?: string;
}

interface DataTableProps<T> {
  data: T[];
  columns: Column<T>[];
  emptyState?: {
    icon: ReactNode;
    title: string;
    description: string;
  };
  onRowClick?: (item: T) => void;
  className?: string;
}

export function DataTable<T extends { id: number | string }>({
  data,
  columns,
  emptyState,
  onRowClick,
  className = "",
}: DataTableProps<T>) {
  if (data.length === 0 && emptyState) {
    return (
      <EmptyState
        icon={emptyState.icon}
        title={emptyState.title}
        description={emptyState.description}
        variant="compact"
      />
    );
  }

  return (
    <div className="overflow-x-auto">
      <table className={`min-w-full divide-y divide-border ${className}`}>
        <thead className="bg-muted/50">
          <tr>
            {columns.map(column => (
              <th
                key={column.key}
                className={`px-6 py-3 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider ${
                  column.className || ""
                }`}
              >
                {column.header}
              </th>
            ))}
          </tr>
        </thead>
        <tbody className="bg-white divide-y divide-border">
          {data.map(item => (
            <tr
              key={item.id}
              className={`hover:bg-muted/30 transition-colors duration-[var(--cp-transition-fast)] ${onRowClick ? "cursor-pointer" : ""}`}
              onClick={() => onRowClick?.(item)}
            >
              {columns.map(column => (
                <td
                  key={column.key}
                  className={`px-6 py-4 whitespace-nowrap ${column.className || ""}`}
                >
                  {column.render(item)}
                </td>
              ))}
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

export type { DataTableProps, Column };
