"use client";

import React, { useRef } from "react";
import gsap from "gsap";
import { useIsomorphicLayoutEffect } from "@/hooks/use-isomorphic-layout-effect";

interface Layer {
  speed: number;
  direction: "up" | "down";
  imageUrl: string;
  className?: string;
}

interface MultiLayerParallaxProps {
  layers: Layer[];
  className?: string;
  minHeight?: string;
  children?: React.ReactNode;
}

export const MultiLayerParallax: React.FC<MultiLayerParallaxProps> = ({
  layers,
  className = "",
  minHeight = "100vh",
  children,
}) => {
  const containerRef = useRef<HTMLDivElement>(null);

  useIsomorphicLayoutEffect(() => {
    if (!containerRef.current) return;

    const ctx = gsap.context(() => {
      layers.forEach((layer, index) => {
        const layerElement = containerRef.current?.querySelector(
          `.parallax-layer-${index}`
        );

        if (layerElement) {
          const multiplier = layer.direction === "up" ? -1 : 1;
          const yPercent = 30 * layer.speed * multiplier;

          gsap.to(layerElement, {
            yPercent,
            ease: "none",
            scrollTrigger: {
              trigger: containerRef.current,
              start: "top bottom",
              end: "bottom top",
              scrub: 1,
            },
          });
        }
      });
    });

    return () => ctx.revert();
  }, [layers]);

  return (
    <section
      ref={containerRef}
      className={`multilayer-parallax relative overflow-hidden ${className}`}
      style={{ minHeight }}
    >
      {layers.map((layer, index) => (
        <div
          key={index}
          className={`parallax-layer absolute inset-0 bg-cover bg-center bg-no-repeat parallax-layer-${index} ${
            layer.className || ""
          }`}
          style={{
            backgroundImage: `url(${layer.imageUrl})`,
            zIndex: index,
            transform: "translateZ(0)",
            willChange: "transform",
          }}
        />
      ))}

      {children && (
        <div className="relative z-10 container mx-auto px-4 h-full flex items-center justify-center">
          {children}
        </div>
      )}
    </section>
  );
};