// Molecule (since it utilizes Text component, which is an atom)

const Table = ({ cellPaddingSize, columns, data, hideHeader, onRowClick }) => {
  // Data passed to the useTable hook needs to be memoized
  // to avaid performance leaks
  const memoColumns = React.useMemo(() => columns, [columns]);
  const memoData = React.useMemo(() => data, [data]);

  const numOfColumns = React.useMemo(() => memoColumns.length, [memoColumns]);
  const defaultTableCellSize = getDefaultTableCellSize(numOfColumns);

  const handleRowClick = (row) => {
     onRowClick?.(row);
  };

  const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow } = useTable({
    columns: memoColumns,
    data: memoData,
  });

  return (
    <div className="table">
      <table className="table__table" {...getTableProps()}>
        {!hideHeader && (
          <thead className="table__head">
            {headerGroups.map((headerGroup) => (
              // Apply the header row props
              <tr className="table__row" {...headerGroup.getHeaderGroupProps()}>
                {headerGroup.headers.map((column) => (
                  <th
                    className={classNames('table__cell', cellPaddingSize, column.size || defaultTableCellSize, {
                      [column.align]: Boolean(column.align),
                      [`${column.alignHeader}--important`]: Boolean(column.alignHeader),
                    })}
                    {...column.getHeaderProps()}
                  >
                    <Text.Regular numOfLines={1}>{column.render('Header')}</Text.Regular>
                  </th>
                ))}
              </tr>
            ))}
          </thead>
        )}

        <tbody className="table__body" {...getTableBodyProps()}>
          {rows.map((row) => {
            // Prepare the row for display
            prepareRow(row);
            return (
              // Apply the row props
              <tr
                className={classNames('table__row table__row--body', { 'table__row--clickable': Boolean(onRowClick) })}
                onClick={() => handleRowClick(row)}
                {...row.getRowProps()}
              >
                {row.cells.map((cell) => (
                  <td
                    className={classNames('table__cell', cellPaddingSize, cell.column.size || defaultTableCellSize, {
                      [cell.column.align]: Boolean(cell.column.align),
                    })}
                    {...cell.getCellProps()}
                  >
                    {cell.render('Cell')}
                  </td>
                ))}
              </tr>
            );
          })}
        </tbody>
      </table>
    </div>
  );
};