import type { JSX } from "solid-js";
import { Show, splitProps } from "solid-js";
import { useInternalDrawerContext } from "./drawer-context";

/** Props for Drawer.Overlay. */
export interface DrawerOverlayProps extends JSX.HTMLAttributes<HTMLDivElement> {
  /** Keep mounted even when closed (for animation control). */
  forceMount?: boolean;
}

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