import cx from "classnames";

export const sizes = ["small", "large"] as const;

export type TitleSize = (typeof sizes)[number];

interface ModalTitleProps extends React.HTMLAttributes<HTMLHeadingElement> {
  size?: TitleSize;
  className?: string;
  children?: React.ReactNode;
}

const ModalTitle: React.FC<ModalTitleProps> = ({
  size,
  className,
  children,
  ...other
}) => (
  <h2
    className={cx(className, {
      "display-3": size === "large",
      h2: size === "small",
    })}
    {...other}
  >
    {children}
  </h2>
);

ModalTitle.displayName = "ModalTitle";

export { ModalTitle };