"use client";

import React, { useRef } from "react";
import Image from "next/image";
import gsap from "gsap";
import { useIsomorphicLayoutEffect } from "@/hooks/use-isomorphic-layout-effect";
import { cn } from "@/lib/utils";

interface ZoomParallaxProps {
  src: string;
  alt: string;
  zoomIntensity?: number;
  direction?: "in" | "out";
  className?: string;
  imageClassName?: string;
  width?: number;
  height?: number;
  quality?: number;
  blurDataURL?: string;
  shouldScale?: boolean;
}

export const ZoomParallax: React.FC<ZoomParallaxProps> = ({
  src,
  alt,
  zoomIntensity = 0.3,
  direction = "in",
  className = "",
  imageClassName = "",
  width,
  height,
  quality = 90,
  blurDataURL,
  shouldScale = true,
}) => {
  const containerRef = useRef<HTMLDivElement>(null);
  const imageRef = useRef<HTMLDivElement>(null);

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

    const ctx = gsap.context(() => {
      const scaleStart = direction === "in" ? 1 : 1 + zoomIntensity;
      const scaleEnd = direction === "in" ? 1 + zoomIntensity : 1;

      const zoomAnimation = gsap.fromTo(
        imageRef.current,
        { scale: scaleStart },
        {
          scale: scaleEnd,
          ease: "none",
          scrollTrigger: {
            trigger: containerRef.current,
            start: "top bottom",
            end: "bottom top",
            scrub: true,
          },
        }
      );

      return () => zoomAnimation.kill();
    });

    return () => ctx.revert();
  }, [zoomIntensity, direction, shouldScale]);

  return (
    <div
      ref={containerRef}
      className={cn("zoom-parallax", "relative overflow-hidden", className)}
    >
      <div
        ref={imageRef}
        className={cn(
          "zoom-parallax-content",
          "w-full h-full will-change-transform",
          shouldScale && "scale-105"
        )}
      >
        <Image
          src={src}
          alt={alt}
          width={width}
          height={height}
          quality={quality}
          blurDataURL={blurDataURL}
          className={cn("w-full h-full object-cover", imageClassName)}
          sizes="(max-width: 768px) 100vw, (max-width: 1200px) 80vw, 70vw"
        />
      </div>
    </div>
  );
};