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

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

const TableDataCell = (props: TableDataCellProps) => {
  const { children, className } = props;

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

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

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

TableDataCell.displayName = "TableDataCell";

export default TableDataCell;
