import { ReactNode, useEffect, useState } from 'react';
import { createPortal } from 'react-dom';

interface FullscreenPortalProps {
  children: ReactNode;
}

/**
 * Portals children to document.body to escape any transformed ancestors.
 * This is important because CSS transforms on parents can break `position: fixed`.
 */
export const FullscreenPortal = ({ children }: FullscreenPortalProps) => {
  const [mounted, setMounted] = useState(false);

  useEffect(() => {
    setMounted(true);
  }, []);

  if (!mounted || typeof document === 'undefined') return null;
  return createPortal(children, document.body);
};
