import { type ComponentPropsWithoutRef } from 'react';
import { cx } from '../utils';

export const Table = ({ children, ...props }: ComponentPropsWithoutRef<'table'>) => (
  <div className="mta-table-wrap">
    <table className="mta-table" {...props}>
      {children}
    </table>
  </div>
);

export const THead = (p: ComponentPropsWithoutRef<'thead'>) => <thead {...p} />;
export const TBody = (p: ComponentPropsWithoutRef<'tbody'>) => <tbody {...p} />;

export const Tr = ({
  selected,
  className,
  ...props
}: ComponentPropsWithoutRef<'tr'> & { selected?: boolean }) => (
  <tr className={cx(selected && 'is-selected', className)} {...props} />
);

export const Th = (p: ComponentPropsWithoutRef<'th'>) => <th {...p} />;
export const Td = (p: ComponentPropsWithoutRef<'td'>) => <td {...p} />;
