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

export interface TableHeadProps
  extends React.DetailedHTMLProps<
    React.HTMLAttributes<HTMLTableSectionElement>,
    HTMLTableSectionElement
  > {
  children?: React.ReactNode;
  className?: string;
}

const TableHead = (props: TableHeadProps) => {
  const { children, className } = props;

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

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

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

TableHead.displayName = "TableHead";

export default TableHead;
