import { type ReactNode } from "react";
import { createPortal } from "react-dom";

// The app's overlay-root convention. Any full-screen or floating overlay renders THROUGH this so it
// escapes whatever ancestor stacking context it was declared in — a `mask-image`/`transform`/`filter`
// on the page scroller (or a rail's `backdrop-filter`) would otherwise trap a `fixed` child and let
// the chrome paint over it. That is the exact class of bug that buried the players in E3; the
// modal/player family already dodges it by portaling to <body>, and this makes that the one blessed
// way. Stacking among overlays is then decided by DOM order + the z-index token scale (tailwind
// `zIndex`), never by an ad-hoc magic number. Portals to <body> (the existing de-facto target).
export default function Overlay({ children }: { children: ReactNode }) {
  if (typeof document === "undefined") return null;
  return createPortal(children, document.body);
}