"use client";

import React, { useRef } from "react";
import { motion } from "motion/react";
import { useParallax } from "@/lib/scroll";

type ParallaxProps = {
  speed?: number; // positive moves with scroll, negative opposite
  axis?: "y" | "x";
  className?: string;
  children?: React.ReactNode;
} & React.ComponentProps<typeof motion.div>;

export function Parallax({ speed = 0.2, axis = "y", className, children, ...rest }: ParallaxProps) {
  const localRef = useRef<HTMLDivElement>(null!);
  const style = useParallax(localRef, speed, axis);

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