"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, transform uygulanan sayfa
 * katmanının dışına taşır. Böylece üst katmandaki scroll skew animasyonu
 * `position: fixed` koordinat sistemini değiştirmez.
 */
export function ViewportPortal({ children }: { children: ReactNode }) {
  const mounted = useSyncExternalStore(
    subscribe,
    getClientSnapshot,
    getServerSnapshot,
  );

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