import type { Ref, RefAttributes, ReactNode } from "react";
import classNames from "classnames/dedupe";

export interface HeaderCellProps extends RefAttributes<HTMLTableCellElement> {
  children?: ReactNode;
  className?: string;
  colSpan?: number;
  rowSpan?: number;
  scope?: "col" | "row" | "colgroup" | "rowgroup";
}

export type HeaderCellRef = Ref<HTMLTableCellElement>;

const HeaderCell = ({ ref, scope = "col", ...props }: HeaderCellProps) => {
  const classes = classNames(
    "mobius",
    "mobius-table__head-cell",
    props.className,
  );

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

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