import { motion, useTransform, useScroll } from "framer-motion";
import React, { useRef } from "react";
import Image from "next/image";

interface ParallaxImageProps {
  src: string;
  speed?: number;
}

export const ParallaxImage = ({ src, speed = 0.5 }: ParallaxImageProps) => {
  const ref = useRef(null);
  const { scrollYProgress } = useScroll({
    target: ref,
    offset: ["start end", "end start"],
  });

  const y = useTransform(scrollYProgress, [0, 1], ["0%", `${speed * 100}%`]);

  return (
    <motion.div ref={ref} style={{ y }} className="relative w-full h-full">
      <Image
        src={src}
        alt="Parallax image"
        fill
        className="object-cover"
        sizes="100vw"
      />
    </motion.div>
  );
};