"use client";

import { motion, useScroll, useTransform } from "framer-motion";
import { useRef } from "react";

interface ParallaxScrollProps {
  children: React.ReactNode;
  speed?: number; // Negative = slower than scroll, positive = faster
  className?: string;
  offset?: [string, string]; // Scroll range ["start", "end"]
}

/**
 * ParallaxScroll - Element that moves at different speed during scroll
 * Inspired by Lama Lama's layered depth effects
 */
export default function ParallaxScroll({
  children,
  speed = 0.5,
  className = "",
  offset = ["start end", "end start"],
}: ParallaxScrollProps) {
  const ref = useRef<HTMLDivElement>(null);
  const { scrollYProgress } = useScroll({
    target: ref,
    offset: offset as any,
  });

  const y = useTransform(scrollYProgress, [0, 1], [0, speed * 100]);

  return (
    <motion.div ref={ref} style={{ y }} className={className}>
      {children}
    </motion.div>
  );
}