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

/** Props for AlertDialog.Overlay. */
export interface AlertDialogOverlayProps extends JSX.HTMLAttributes<HTMLDivElement> {
  forceMount?: boolean;
}

/** Backdrop overlay behind AlertDialog content. */
export function AlertDialogOverlay(props: AlertDialogOverlayProps): JSX.Element {
  const [local, rest] = splitProps(props, ["forceMount"]);
  const ctx = useInternalAlertDialogContext();
  return (
    <Show when={local.forceMount || ctx.isOpen()}>
      <div aria-hidden="true" data-state={ctx.isOpen() ? "open" : "closed"} {...rest} />
    </Show>
  );
}