// @design-system: primitives/Table
import type { ReactNode, TableHTMLAttributes, HTMLAttributes, ThHTMLAttributes, TdHTMLAttributes } from 'react';
import { cn } from '@/lib/cn';

/**
 * Table - canonical data table. Replaces ad-hoc `<table className="w-full text-sm">`
 * spellings across admin/vendor/affiliate list views. RTL-first (logical padding,
 * `text-start`), semantic tokens only.
 */
export function Table({ className, children, ...props }: TableHTMLAttributes<HTMLTableElement>) {
  return (
    <div className="w-full overflow-x-auto">
      <table className={cn('w-full border-collapse text-sm', className)} {...props}>
        {children}
      </table>
    </div>
  );
}

function Head({ className, children, ...props }: HTMLAttributes<HTMLTableSectionElement>) {
  return (
    <thead className={cn('border-border-default border-b', className)} {...props}>
      {children}
    </thead>
  );
}

function Body({ className, children, ...props }: HTMLAttributes<HTMLTableSectionElement>) {
  return (
    <tbody className={cn('divide-border-default divide-y', className)} {...props}>
      {children}
    </tbody>
  );
}

function Row({ className, children, ...props }: HTMLAttributes<HTMLTableRowElement>) {
  return (
    <tr className={className} {...props}>
      {children}
    </tr>
  );
}

function HeadCell({ className, children, ...props }: ThHTMLAttributes<HTMLTableCellElement>) {
  return (
    <th
      scope="col"
      className={cn('text-text-muted px-3 py-2 text-start text-xs font-semibold', className)}
      {...props}
    >
      {children}
    </th>
  );
}

function Cell({ className, children, ...props }: TdHTMLAttributes<HTMLTableCellElement>) {
  return (
    <td className={cn('text-text-primary px-3 py-3 text-start', className)} {...props}>
      {children}
    </td>
  );
}

Table.Head = Head;
Table.Body = Body;
Table.Row = Row;
Table.HeadCell = HeadCell;
Table.Cell = Cell;

export type TableChild = ReactNode;