import React from "react";
import style from "../../../style";
import { twMerge } from "tailwind-merge";

export interface TableHeadCellProps
  extends React.DetailedHTMLProps<
    React.TdHTMLAttributes<HTMLTableDataCellElement>,
    HTMLTableDataCellElement
  > {
  children?: React.ReactNode;
  className?: string;
}

const TableHeadCell = (props: TableHeadCellProps) => {
  const { children, className } = props;

  const attributes = Object.assign({}, props);

  const initialCss = style.table.headCell;
  const classesMerged = `${initialCss} ${className ? className : ""}`;

  return (
    <th {...attributes} className={twMerge(classesMerged)}>
      {children}
    </th>
  );
};

TableHeadCell.displayName = "TableHeadCell";

export default TableHeadCell;
