"use client";

import { useLottieLoader } from "@/contexts/LottieLoaderContext";
import { ReactNode } from "react";

interface EarlyMountWrapperProps {
  children: ReactNode;
}

/**
 * Mounts children immediately (so useEffect/preloading runs early),
 * but keeps them invisible until the main loader finishes.
 * Use this for components that need to start loading assets in parallel
 * with the main loader animation.
 */
export default function EarlyMountWrapper({
  children,
}: EarlyMountWrapperProps) {
  const { isLoaderComplete } = useLottieLoader();

  return (
    <div
      style={{
        // Keep children mounted but visually hidden until loader completes
        visibility: isLoaderComplete ? "visible" : "hidden",
        // Use opacity 0 as well to prevent any flash
        opacity: isLoaderComplete ? 1 : 0,
        // Smooth fade-in when loader completes
        transition: "opacity 0.3s ease-out",
      }}
    >
      {children}
    </div>
  );
}