import type { Ref, RefAttributes, ReactNode } from "react";
import classNames from "classnames/dedupe";
import type { DOMProps } from "../../types/dom";
import "./Table.css";

export type TableElementType = HTMLTableElement;

export interface TableProps extends DOMProps, RefAttributes<TableElementType> {
  children?: ReactNode;
  className?: string;
}

export type TableRef = Ref<TableElementType>;

const Table = ({ ref, ...props }: TableProps) => {
  const classes = classNames("mobius", "mobius-table", props.className);

  return <table ref={ref} {...props} className={classes} />;
};

Table.displayName = "Table";
export { Table };
