"use client";
import { motion } from "framer-motion";
import { ReactNode } from "react";
import { useParallax } from "@/hooks/motion/useParallax";
import { useMotionContext } from "./MotionProvider";

interface ParallaxContainerProps {
  children: ReactNode;
  distance?: number;
  className?: string;
}

export function ParallaxContainer({
  children,
  distance = 30,
  className,
}: ParallaxContainerProps) {
  const { reducedMotion } = useMotionContext();
  const { ref, y } = useParallax(distance);

  if (reducedMotion) {
    return <div className={className}>{children}</div>;
  }

  return (
    <div ref={ref} className={className} style={{ overflow: "hidden" }}>
      <motion.div style={{ y, willChange: "transform" }}>
        {children}
      </motion.div>
    </div>
  );
}