import type { ReactNode, TdHTMLAttributes, ThHTMLAttributes } from 'react';
import { cn } from '@/lib/cn';

/**
 * Data table helpers. `<DataTable stack>` turns rows into two-column stacked records under 768 px — give every <Td>
 * a `label` (renders `data-label`) and mark the name cell `primary`. `<DataTable scroll>` keeps columns and scrolls
 * horizontally instead (for numeric comparison tables where row structure matters).
 */
export function DataTable({ children, stack = true, scroll = false, compact = false, className, caption }: { children: ReactNode; stack?: boolean; scroll?: boolean; compact?: boolean; className?: string; caption?: string }) {
  const table = (
    <table className={cn('data-table', stack && !scroll && 'stack', compact && 'compact', className)}>
      {caption && <caption className="sr-only">{caption}</caption>}
      {children}
    </table>
  );
  return scroll ? <div className="table-scroll -mx-4 px-4 md:mx-0 md:px-0">{table}</div> : table;
}

export function Th({ children, num, className, ...rest }: ThHTMLAttributes<HTMLTableCellElement> & { num?: boolean }) {
  return (
    <th scope="col" className={cn(num && 'num', className)} {...rest}>
      {children}
    </th>
  );
}

export function Td({ children, label, num, primary, wide, hideStack, className, ...rest }: TdHTMLAttributes<HTMLTableCellElement> & { label?: string; num?: boolean; primary?: boolean; wide?: boolean; hideStack?: boolean }) {
  return (
    <td data-label={label} className={cn(num && 'num', primary && 'primary', wide && 'wide', hideStack && 'hide-stack', className)} {...rest}>
      {children}
    </td>
  );
}

export function EmptyRow({ cols, children = 'No rows.' }: { cols: number; children?: ReactNode }) {
  return (
    <tr>
      <td colSpan={cols} className="py-8 text-center text-sm text-ink-3">
        {children}
      </td>
    </tr>
  );
}