import cn from '../utils/cn';

const Table = ({ className, children }) => {
  return (
    <table className={cn('wmx-min-w-full wmx-table-fixed wmx-divide-y wmx-divide-gray-200', className)}>
      {children}
    </table>
  );
};

const Heading = ({ children, className }) => {
  return (
    <th scope='col' className={cn('wmx-text-left wmx-text-sm wmx-px-2 wmx-py-3', className)}>
      {children}
    </th>
  );
};

const Data = ({ children, className, onClick }) => {
  return (
    <td onClick={onClick} className={`wmx-py-1.5 wmx-px-2 wmx-text-sm wmx-font-medium ${className}`}>
      {children}
    </td>
  );
};

Table.Heading = Heading;
Table.Data = Data;

export default Table;
