// components/parallax/ParallaxSection.tsx
"use client";

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

interface ParallaxSectionProps {
  children: React.ReactNode;
  className?: string;
  speed?: number;
  direction?: "up" | "down";
  trigger?: string;
}

export const ParallaxSection: React.FC<ParallaxSectionProps> = ({
  children,
  className = "",
  speed = 0.5,
  direction = "up",
  trigger,
}) => {
  const sectionRef = useRef<HTMLDivElement>(null);
  const contentRef = useRef<HTMLDivElement>(null);

  useIsomorphicLayoutEffect(() => {
    if (!sectionRef.current || !contentRef.current) return;

    const ctx = gsap.context(() => {
      const multiplier = direction === "up" ? -1 : 1;
      const yPercent = 50 * speed * multiplier;

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

    return () => ctx.revert();
  }, [speed, direction, trigger]);

  return (
    <section
      ref={sectionRef}
      className={`parallax-section overflow-hidden ${className}`}
    >
      <div ref={contentRef} className="parallax-section-content">
        {children}
      </div>
    </section>
  );
};