import React, { ReactNode, ElementType } from 'react';
import { Box, BoxProps } from './primitives/Box';

interface TableProps extends BoxProps<'table'> {
  children: ReactNode;
}

export function Table({ children, className = '', ...props }: TableProps) {
  const { border, translate, ...rest } = props;
  return (
    <Box overflow="auto" border borderColor="border-border-gray" rounded="sm">
      <table className={`w-full border-collapse text-left ${className}`} {...(rest as any)}>
        {children}
      </table>
    </Box>
  );
}

interface TableHeaderProps extends BoxProps<'thead'> {
  children: ReactNode;
}

export function TableHeader({ children, className = '', ...props }: TableHeaderProps) {
  return (
    <Box as="thead" className={`bg-graphite-black border-b border-border-gray ${className}`} {...props}>
      {children}
    </Box>
  );
}

export const TableHead = TableHeader;

interface TableBodyProps extends BoxProps<'tbody'> {
  children: ReactNode;
}

export function TableBody({ children, className = '', ...props }: TableBodyProps) {
  return (
    <Box as="tbody" className={`divide-y divide-border-gray/50 ${className}`} {...props}>
      {children}
    </Box>
  );
}

interface TableRowProps extends BoxProps<'tr'> {
  children: ReactNode;
  hoverBg?: string;
  clickable?: boolean;
  variant?: string;
}

export function TableRow({ children, className = '', hoverBg, clickable, variant, ...props }: TableRowProps) {
  const classes = [
    'transition-colors',
    clickable || props.onClick ? 'cursor-pointer' : '',
    hoverBg ? `hover:${hoverBg}` : (clickable || props.onClick ? 'hover:bg-white/5' : ''),
    className
  ].filter(Boolean).join(' ');

  return (
    <Box as="tr" className={classes} {...props}>
      {children}
    </Box>
  );
}

interface TableCellProps extends BoxProps<'td'> {
  children: ReactNode;
}

export function TableHeaderCell({ children, className = '', ...props }: TableCellProps) {
  const classes = [
    'px-4 py-3 text-xs font-bold text-gray-400 uppercase tracking-wider',
    className
  ].filter(Boolean).join(' ');

  return (
    <Box as="th" className={classes} {...props}>
      {children}
    </Box>
  );
}

export function TableCell({ children, className = '', ...props }: TableCellProps) {
  const classes = [
    'px-4 py-4 text-sm text-gray-300',
    className
  ].filter(Boolean).join(' ');

  return (
    <Box as="td" className={classes} {...props}>
      {children}
    </Box>
  );
}