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

interface TableProps extends HTMLAttributes<HTMLTableElement> {
  children: ReactNode;
  className?: string;
}

export function Table({ children, className = '', ...props }: TableProps) {
  return (
    <Box overflow="auto">
      <table className={`w-full ${className}`} {...props}>
        {children}
      </table>
    </Box>
  );
}

interface TableHeadProps extends HTMLAttributes<HTMLTableSectionElement> {
  children: ReactNode;
}

export function TableHead({ children, ...props }: TableHeadProps) {
  return (
    <thead {...props}>
      {children}
    </thead>
  );
}

interface TableBodyProps extends HTMLAttributes<HTMLTableSectionElement> {
  children: ReactNode;
}

export function TableBody({ children, ...props }: TableBodyProps) {
  return (
    <tbody {...props}>
      {children}
    </tbody>
  );
}

interface TableRowProps extends BoxProps<'tr'> {
  children: ReactNode;
  clickable?: boolean;
  variant?: 'default' | 'highlight';
}

export function TableRow({ children, className = '', clickable = false, variant = 'default', ...props }: TableRowProps) {
  const baseClasses = 'border-b border-charcoal-outline/50 transition-colors';
  const variantClasses = variant === 'highlight' ? 'bg-primary-blue/5' : '';
  const classes = [
    baseClasses,
    variantClasses,
    clickable ? 'cursor-pointer' : '',
    className
  ].filter(Boolean).join(' ');

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

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

export function TableHeader({ children, className = '', ...props }: TableHeaderProps) {
  const baseClasses = 'py-3 px-4 text-xs font-medium text-gray-400 uppercase';
  const classes = [baseClasses, className].filter(Boolean).join(' ');

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

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

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

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