"use client";

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

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

export default function ParallaxImage({
  src,
  alt,
  className = "",
  speed = 0.5,
}: ParallaxImageProps) {
  const imageRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (typeof window === "undefined") return;

    const handleScroll = () => {
      if (!imageRef.current) return;

      // Obtener la posición del elemento en el viewport
      const rect = imageRef.current.getBoundingClientRect();
      const elementTop = rect.top;
      const elementHeight = rect.height;
      const windowHeight = window.innerHeight;

      // Calcular si el elemento está visible
      const isVisible =
        elementTop < windowHeight && elementTop + elementHeight > 0;

      if (isVisible) {
        // Calcular el movimiento basado en la posición del elemento
        const scrolled = window.pageYOffset;
        const elementOffset = imageRef.current.offsetTop;
        const rate = (scrolled - elementOffset) * speed;

        // Aplicar el transform
        imageRef.current.style.transform = `translateY(${rate}px)`;
      }
    };

    // Throttle para mejor rendimiento
    let ticking = false;
    const throttledScroll = () => {
      if (!ticking) {
        requestAnimationFrame(() => {
          handleScroll();
          ticking = false;
        });
        ticking = true;
      }
    };

    // Agregar event listener
    window.addEventListener("scroll", throttledScroll, { passive: true });

    // Limpiar event listener
    return () => {
      window.removeEventListener("scroll", throttledScroll);
    };
  }, [speed]);

  return (
    <div className={`overflow-hidden relative w-full h-full ${className}`}>
      <div
        ref={imageRef}
        className="absolute inset-0 will-change-transform"
        style={{ transform: "translateY(0px)" }}
      >
        <Image
          src={src}
          alt={alt}
          fill
          className="object-cover scale-110"
          loading="lazy"
        />
      </div>
    </div>
  );
}