import { cn } from '@/lib/utils'

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

export function Table({ children, className }: TableProps) {
  return (
    <div className="w-full overflow-x-auto">
      <table className={cn('w-full', className)}>
        {children}
      </table>
    </div>
  )
}

export function TableHead({ children, className }: TableProps) {
  return (
    <thead className={cn('border-b border-border', className)}>
      {children}
    </thead>
  )
}

export function TableBody({ children, className }: TableProps) {
  return <tbody className={className}>{children}</tbody>
}

export function TableRow({ children, className }: TableProps) {
  return (
    <tr className={cn('border-b border-border/50 transition-colors hover:bg-bg/50', className)}>
      {children}
    </tr>
  )
}

interface TableCellProps {
  children?: React.ReactNode
  className?: string
  align?: 'left' | 'center' | 'right'
  colSpan?: number
}

export function TableHeader({ children, className, align = 'left', colSpan }: TableCellProps) {
  const alignClass = {
    left: 'text-left',
    center: 'text-center',
    right: 'text-right',
  }

  return (
    <th
      colSpan={colSpan}
      className={cn(
        'py-3 px-4 text-xs font-medium text-text-secondary uppercase tracking-wider',
        alignClass[align],
        className
      )}
    >
      {children}
    </th>
  )
}

export function TableCell({ children, className, align = 'left', colSpan }: TableCellProps) {
  const alignClass = {
    left: 'text-left',
    center: 'text-center',
    right: 'text-right',
  }

  return (
    <td
      colSpan={colSpan}
      className={cn(
        'py-3.5 px-4 text-sm text-text-primary',
        alignClass[align],
        className
      )}
    >
      {children}
    </td>
  )
}
