// packages/core/src/components/dialog/dialog-overlay.tsx
import type { JSX } from "solid-js";
import { Show, splitProps } from "solid-js";
import { useInternalDialogContext } from "./dialog-context";
import type { DialogOverlayProps } from "./dialog.props";

export type { DialogOverlayProps };

/** Semi-transparent overlay rendered behind dialog content. */
export function DialogOverlay(props: DialogOverlayProps): JSX.Element {
  const [local, rest] = splitProps(props, ["forceMount"]);
  const ctx = useInternalDialogContext();

  return (
    <Show when={local.forceMount || ctx.isOpen()}>
      <div aria-hidden="true" data-state={ctx.isOpen() ? "open" : "closed"} {...rest} />
    </Show>
  );
}
