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

import { useTheme } from '../../Theme';
import { StyledTableCell } from '../styled-components';
import { TableCellProps } from '../types.d';

export const TableCell: FunctionComponent<TableCellProps> = ({ children, heading, style, className = '', isNote }) => {
  const theme = useTheme();
  const classNames = cn({
    square_table__cell: true,
    [className]: true,
  });

  return (
    <StyledTableCell className={classNames} $theme={theme} style={style}>
      {isNote ? (
        <>
          <span className="square_table__note">{heading}</span>
          {children}
        </>
      ) : (
        children
      )}
    </StyledTableCell>
  );
};
