import type { JSX } from "solid-js";
import { createUniqueId, onCleanup, onMount, splitProps } from "solid-js";
import { useInternalAlertDialogContext } from "./alert-dialog-context";

/** Props for AlertDialog.Title. */
export interface AlertDialogTitleProps extends JSX.HTMLAttributes<HTMLHeadingElement> {
  children?: JSX.Element;
}

/** Title for the AlertDialog. Registers its ID for aria-labelledby. */
export function AlertDialogTitle(props: AlertDialogTitleProps): JSX.Element {
  const [local, rest] = splitProps(props, ["children"]);
  const ctx = useInternalAlertDialogContext();
  const id = createUniqueId();
  onMount(() => ctx.setTitleId(id));
  onCleanup(() => ctx.setTitleId(undefined));
  return (
    <h2 id={id} {...rest}>
      {local.children}
    </h2>
  );
}