// packages/core/src/components/dialog/dialog-title.tsx
import type { JSX } from "solid-js";
import { createUniqueId, onCleanup, onMount, splitProps } from "solid-js";
import { useInternalDialogContext } from "./dialog-context";
import type { DialogTitleProps } from "./dialog.props";

export type { DialogTitleProps };

/** Renders as h2 and registers its ID for aria-labelledby on Dialog.Content. */
export function DialogTitle(props: DialogTitleProps): JSX.Element {
  const [local, rest] = splitProps(props, ["children"]);
  const ctx = useInternalDialogContext();
  const id = createUniqueId();

  onMount(() => ctx.setTitleId(id));
  onCleanup(() => ctx.setTitleId(undefined));

  return (
    <h2 id={id} {...rest}>
      {local.children}
    </h2>
  );
}