import type { ReactNode } from 'react'
import { cn } from '@/lib/utils'

export type TableSize = 'sm' | 'md' | 'lg'

const thSizes: Record<TableSize, string> = {
  sm: 'px-2 py-[var(--ui-table-py-sm)] text-[10px]',
  md: 'px-3 py-[var(--ui-table-py-md)] text-[11px]',
  lg: 'px-4 py-[var(--ui-table-py-lg)] text-[12px]',
}

const tdSizes: Record<TableSize, string> = {
  sm: 'px-2 py-[var(--ui-table-py-sm)] text-[length:var(--ui-font-sm)]',
  md: 'px-3 py-[var(--ui-table-py-md)] text-[length:var(--ui-font-md)]',
  lg: 'px-4 py-[var(--ui-table-py-lg)] text-[length:var(--ui-font-lg)]',
}

export function Table({ children }: { children: ReactNode }) {
  return (
    <div className="overflow-x-auto">
      <table className="w-full min-w-[640px] text-left text-sm">{children}</table>
    </div>
  )
}

export function Th({ children, className, size = 'md' }: { children?: ReactNode; className?: string; size?: TableSize }) {
  return (
    <th
      className={cn(
        'border-b border-[var(--border)] bg-[var(--bg-secondary)] font-medium uppercase tracking-wide text-[var(--text-muted)]',
        thSizes[size],
        className,
      )}
    >
      {children}
    </th>
  )
}

export function Td({ children, className, size = 'md' }: { children?: ReactNode; className?: string; size?: TableSize }) {
  return (
    <td className={cn('border-b border-[var(--border)] align-middle text-[var(--text-primary)]', tdSizes[size], className)}>
      {children}
    </td>
  )
}
