import { cn } from "@/lib/utils";
import { HTMLAttributes, TdHTMLAttributes, ThHTMLAttributes } from "react";

interface TableProps {
  children: React.ReactNode;
  className?: string;
}

export function Table({ children, className }: TableProps) {
  return (
    <div className="overflow-x-auto rounded-xl border border-gray-200 bg-white">
      <table className={cn("w-full text-sm", className)}>
        {children}
      </table>
    </div>
  );
}

export function TableHead({ children }: TableProps) {
  return <thead className="bg-gray-50 text-xs uppercase text-gray-500">{children}</thead>;
}

export function TableBody({ children }: TableProps) {
  return <tbody className="divide-y divide-gray-100">{children}</tbody>;
}

export function TableRow({
  children, className, onClick, ...rest
}: TableProps & { onClick?: () => void } & HTMLAttributes<HTMLTableRowElement>) {
  return (
    <tr
      className={cn("transition-colors", onClick && "cursor-pointer hover:bg-blue-50", className)}
      onClick={onClick}
      {...rest}
    >
      {children}
    </tr>
  );
}

export function Th({ children, className, ...rest }: TableProps & ThHTMLAttributes<HTMLTableCellElement>) {
  return <th className={cn("px-4 py-3 text-left font-medium", className)} {...rest}>{children}</th>;
}

export function Td({ children, className, ...rest }: TableProps & TdHTMLAttributes<HTMLTableCellElement>) {
  return <td className={cn("px-4 py-3 text-gray-700", className)} {...rest}>{children}</td>;
}

export function EmptyState({ message = "No data yet" }: { message?: string }) {
  return (
    <tr>
      <td colSpan={100} className="py-12 text-center text-gray-400">
        <div className="flex flex-col items-center gap-2">
          <svg className="h-12 w-12 text-gray-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4" />
          </svg>
          <span className="text-sm">{message}</span>
        </div>
      </td>
    </tr>
  );
}
