import { css } from "@emotion/react";
import type { Ref } from "react";
import type { HeadingProps as AriaHeadingProps } from "react-aria-components";
import { Heading as AriaHeading } from "react-aria-components";

import { classNames } from "@phoenix/utils/classNames";

import { headingBaseCSS, textBaseCSS } from "./styles";
import type { Weight } from "./types";

export interface HeadingProps extends AriaHeadingProps {
  /**
   * Sets the font weight
   * @default 'normal'
   */
  weight?: Weight;
}

/**
 * Heading is used to create various levels of typographic hierarchies.
 */
function Heading({
  ref,
  ...props
}: HeadingProps & { ref?: Ref<HTMLHeadingElement> }) {
  const { children, level = 3, weight = "normal", ...otherProps } = props;

  return (
    <AriaHeading
      {...otherProps}
      css={css(textBaseCSS, headingBaseCSS)}
      className={classNames("heading", props.className)}
      ref={ref}
      level={level}
      data-level={level}
      data-weight={weight}
    >
      {children}
    </AriaHeading>
  );
}

export { Heading };
