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

export interface TableProps {
  children?: React.ReactNode;
  className?: string;
}

const Table = (
  props: TableProps &
    React.DetailedHTMLProps<
      React.TableHTMLAttributes<HTMLTableElement>,
      HTMLTableElement
    >
) => {
  const { children, className } = props;

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

  return (
    <table {...props} className={twMerge(classesMerged)}>
      {children}
    </table>
  );
};

Table.displayName = "Table";

export default Table;
