import * as React from 'react';
import { Slot } from '@radix-ui/react-slot'; // Import Slot for asChild functionality
import { cn } from '@/lib/utils';

interface TableProps extends React.HTMLAttributes<HTMLTableElement> {
  asChild?: boolean;
}

const Table = React.forwardRef<HTMLTableElement, TableProps>(
  ({ className, asChild = false, ...props }, ref) => { // Destructure className and props
    const Comp = asChild ? Slot : 'table'; // Use Slot for asChild
  
    return (
      <Comp
        ref={ref}
        className={cn('w-full text-sm text-left rtl:text-right', className)}
        {...props}
      />
    );
  }
);

Table.displayName = 'Table';

interface TableHeaderProps extends React.HTMLAttributes<HTMLTableSectionElement> {
  asChild?: boolean;
}

const TableHeader = React.forwardRef<HTMLTableSectionElement, TableHeaderProps>(
  ({ className, asChild = false, ...props }, ref) => { // Destructure className and props
    const Comp = asChild ? Slot : 'thead'; // Use Slot for asChild
  
    return (
      <Comp
        ref={ref}
        className={cn(
          'bg-gray-50',
          className
        )}
        {...props}
      />
    );
  }
);

TableHeader.displayName = 'TableHeader';

interface TableBodyProps extends React.HTMLAttributes<HTMLTableSectionElement> {
  asChild?: boolean;
}

const TableBody = React.forwardRef<HTMLTableSectionElement, TableBodyProps>(
  ({ className, asChild = false, ...props }, ref) => { // Destructure className and props
    const Comp = asChild ? Slot : 'tbody'; // Use Slot for asChild
  
    return (
      <Comp
        ref={ref}
        className={cn(
          'bg-white divide-y divide-gray-200',
          className
        )}
        {...props}
      />
    );
  }
);

TableBody.displayName = 'TableBody';

interface TableRowProps extends React.HTMLAttributes<HTMLTableRowElement> {
  asChild?: boolean;
}

const TableRow = React.forwardRef<HTMLTableRowElement, TableRowProps>(
  ({ className, asChild = false, ...props }, ref) => { // Fix arrow function syntax, destructure className and props
    const Comp = asChild ? Slot : 'tr'; // Use Slot for asChild
  
    return (
      <Comp
        ref={ref}
        className={cn(
          'hover:bg-gray-50',
          className
        )}
        {...props}
      />
    );
  }
);

TableRow.displayName = 'TableRow';

interface TableCellProps extends React.HTMLAttributes<HTMLTableDataCellElement> {
  asChild?: boolean;
}

const TableCell = React.forwardRef<HTMLTableDataCellElement, TableCellProps>(
  ({ className, asChild = false, ...props }, ref) => { // Fix arrow function syntax, destructure className and props
    const Comp = asChild ? Slot : 'td'; // Use Slot for asChild
  
    return (
      <Comp
        ref={ref}
        className={cn(
          'px-4 py-2',
          className
        )}
        {...props}
      />
    );
  }
);

TableCell.displayName = 'TableCell';

interface TableHeadProps extends React.HTMLAttributes<HTMLTableHeaderCellElement> {
  asChild?: boolean;
}

const TableHead = React.forwardRef<HTMLTableHeaderCellElement, TableHeadProps>(
  ({ className, asChild = false, ...props }, ref) => { // Fix arrow function syntax, destructure className and props
    const Comp = asChild ? Slot : 'th'; // Use Slot for asChild
  
    return (
      <Comp
        ref={ref}
        className={cn(
          'px-4 py-2 text-left font-medium text-gray-600 uppercase tracking-wider',
          className
        )}
        {...props}
      />
    );
  }
);

TableHead.displayName = 'TableHead';

export { Table, TableHeader, TableBody, TableRow, TableCell, TableHead };