import React, { FunctionComponent } from 'react';
import cn from 'classnames';

import { useTheme } from '../../Theme';
import { StyledTableHeaderComponent } from '../styled-components';
import { TableHead } from './head';
import { TableHeaderProps } from '../types.d';

const Header: FunctionComponent<TableHeaderProps> = ({ children, className = '', style }): React.ReactElement => {
  const theme = useTheme();
  const classNames = cn({
    square_table__row: true,
    square_table__row_head: true,
    [className]: true,
  });
  return (
    <StyledTableHeaderComponent style={style} className={classNames} $theme={theme}>
      {children}
    </StyledTableHeaderComponent>
  );
};

export const TableHeader = Object.assign(Header, { TH: TableHead });
