"use client";

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

interface ContentWrapperProps {
  children: ReactNode;
}

export default function ContentWrapper({ children }: ContentWrapperProps) {
  const { isLoaderComplete } = useLottieLoader();

  // Render content in background (hidden) to allow preloading while loader is showing
  // This allows videos, images, and other resources to load behind the scenes
  return (
    <div
      style={{
        visibility: isLoaderComplete ? "visible" : "hidden",
        opacity: isLoaderComplete ? 1 : 0,
        pointerEvents: isLoaderComplete ? "auto" : "none",
        position: "relative",
        zIndex: 1,
      }}
    >
      {children}
    </div>
  );
}