import * as React from 'react';
import classNames from 'classnames';

import type { TableCellProps } from '../TableCell/TableCell';

export interface TableHeaderCellProps extends TableCellProps {
  /**
   * If true, the element inside the header cell with `sorting` className will be positioned absolutely to the right.
   */
  sorting?: boolean;
}

export const TableHeaderCell: React.FC<TableHeaderCellProps> = ({
  type,
  sorting,
  children,
  colspan,
  rowspan,
  ...rest
}) => {
  const typeModifiers: string[] = type ? (Array.isArray(type) ? [...type] : [type]) : [];

  colspan = typeof colspan === 'number' && colspan >= 1 ? colspan : undefined;
  rowspan = typeof rowspan === 'number' && rowspan >= 1 ? rowspan : undefined;

  return (
    <th
      className={classNames(
        typeModifiers.map(typeModifier => `table__cell--${typeModifier}`),
        {
          'table__cell--sorting': sorting,
        }
      )}
      colSpan={colspan}
      rowSpan={rowspan}
      {...rest}
    >
      {children}
    </th>
  );
};