import { type PropsWithChildren } from 'react';

import clsx from 'clsx';

import { cellStyle, headerCellStyle, rowStyle, tableStyle } from './table.css';

type CompoundProps = PropsWithChildren<{ className?: string }>;

const Table = ({ children, className }: CompoundProps) => {
  return <table className={clsx(tableStyle, className)}>{children}</table>;
};

const TableRow = ({ children, className }: CompoundProps) => {
  return <tr className={clsx(rowStyle, className)}>{children}</tr>;
};

const TableRowCell = ({ children, className }: CompoundProps) => {
  return <td className={clsx(cellStyle, className)}>{children}</td>;
};

const TableHeaderCell = ({ children, className }: CompoundProps) => {
  return <th className={clsx(headerCellStyle, className)}>{children}</th>;
};

export default Object.assign(Table, {
  Row: TableRow,
  Cell: TableRowCell,
  HeaderCell: TableHeaderCell,
});