"use client";

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

const subscribe = () => () => {};
const getClientSnapshot = () => true;
const getServerSnapshot = () => false;

/**
 * Viewport'a sabit kalması gereken öğeleri sayfa katmanının dışına, doğrudan
 * body'ye taşır. Böylece üst katmanlardaki bir transform (ör. Parallax/Reveal)
 * `position: fixed` koordinat sistemini değiştiremez.
 */
export function ViewportPortal({ children }: { children: ReactNode }) {
  const mounted = useSyncExternalStore(
    subscribe,
    getClientSnapshot,
    getServerSnapshot,
  );

  return mounted ? createPortal(children, document.body) : null;
}