import React from 'react';
import { cn } from '@/lib/cn';

export function Table({ className, ...rest }: React.HTMLAttributes<HTMLTableElement>) {
  return <table className={cn('w-full text-sm', className)} {...rest} />;
}

export function THead({ className, ...rest }: React.HTMLAttributes<HTMLTableSectionElement>) {
  return <thead className={cn('text-left text-[11px] uppercase tracking-wider text-ink-500', className)} {...rest} />;
}

export function TH({ className, ...rest }: React.ThHTMLAttributes<HTMLTableCellElement>) {
  return <th className={cn('font-medium px-4 py-2.5 border-b border-ink-100', className)} {...rest} />;
}

export function TR({ className, ...rest }: React.HTMLAttributes<HTMLTableRowElement>) {
  return <tr className={cn('hover:bg-ink-50/60 transition-colors', className)} {...rest} />;
}

export function TD({ className, ...rest }: React.TdHTMLAttributes<HTMLTableCellElement>) {
  return <td className={cn('px-4 py-3 border-b border-ink-100 text-ink-800', className)} {...rest} />;
}
