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

import s from './TableCell.module.scss';

const cn = classNames.bind(s);

interface ITableCellProps {
  header: boolean;
  children: React.ReactNode;
  align: 'left' | 'right' | 'center' | 'justify';
  bolder?: boolean;
  color?: string;
  colSpan?: number;
}

const TableCell = ({
  children,
  header = false,
  color,
  align = 'left',
  bolder,
  colSpan,
  ...tdProps
}: ITableCellProps) => {
  const colorClass = color ? `color-${color}` : '';

  if (header) {
    return (
      <th
        className={cn(s.tableCell, colorClass, { header, bolder })}
        align={align}
        colSpan={colSpan}
        {...tdProps}
      >
        {children}
      </th>
    );
  }

  return (
    <td
      className={cn(s.tableCell, colorClass, { bolder })}
      align={align}
      colSpan={colSpan}
      {...tdProps}
    >
      {children}
    </td>
  );
};

export default TableCell;