"use client";

import React, { useEffect, useRef } from "react";
import Image from "next/image";
import gsap from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";

gsap.registerPlugin(ScrollTrigger);

const images = [
  "https://library.rapid-ui.com/images/blocks/parallax3/1.jpg",
  "https://library.rapid-ui.com/images/blocks/parallax3/2.jpg",
  "https://library.rapid-ui.com/images/blocks/parallax3/3.jpg",
  "https://library.rapid-ui.com/images/blocks/parallax3/4.jpg",
  "https://library.rapid-ui.com/images/blocks/parallax3/5.jpg",
  "https://library.rapid-ui.com/images/blocks/parallax3/6.jpg",
  "https://library.rapid-ui.com/images/blocks/parallax3/1.jpg",
  "https://library.rapid-ui.com/images/blocks/parallax3/2.jpg",
  "https://library.rapid-ui.com/images/blocks/parallax3/3.jpg",
];

function Parallax3() {
  const containerRef = useRef(null);
  const imageRefs = useRef<HTMLImageElement[]>([]);

  const addToRefs = (el: HTMLImageElement) => {
    if (el && !imageRefs.current.includes(el)) {
      imageRefs.current.push(el);
    }
  };

  useEffect(() => {
    imageRefs.current.forEach((img) => {
      gsap.set(img, { scale: 1 });

      gsap.fromTo(
        img,
        { scale: 1 },
        {
          scale: 0.6,
          immediateRender: false,
          scrollTrigger: {
            trigger: img,
            start: "top bottom",
            end: "bottom top",
            scrub: 0.4,
          },
        }
      );
    });
  }, []);

  return (
    <div className="py-[800px]">
      <section
        ref={containerRef}
        className="relative max-w-7xl mx-auto px-4 py-16"
      >
        <div className="relative">
          {images.map((src, i) => (
            <div
              key={i}
              ref={addToRefs}
              className="relative"
              style={{
                marginTop: i === 0 ? 0 : "-30%",
              }}
            >
              <Image
                src={src}
                alt={`overlap-parallax-${i}`}
                width={1920}
                height={1080}
                className="w-full rounded-lg shadow-xl"
              />
            </div>
          ))}
        </div>
      </section>
    </div>
  );
}

export { Parallax3 };
slider-3
