import { jsx } from 'react/jsx-runtime';
import React__default, { useRef } from 'react';
import { useReducedMotion, useScroll, useTransform, motion } from 'motion/react';
import { cn } from '../../../utils/cn.js';

/**
 * ParallaxSection
 *
 * A scroll-driven parallax wrapper that translates its children at a configurable
 * rate relative to normal scroll, creating depth and visual interest.
 *
 * Uses `transform: translate3d` for GPU-accelerated, jank-free animation.
 *
 * @example
 * ```tsx
 * <ParallaxSection speed={0.3}>
 *   <img src="/hero-bg.jpg" alt="" className="w-full h-[600px] object-cover" />
 * </ParallaxSection>
 * ```
 *
 * @example
 * ```tsx
 * // Opposite direction
 * <ParallaxSection speed={-0.2} direction="horizontal">
 *   <div className="flex gap-4">{items}</div>
 * </ParallaxSection>
 * ```
 */
const ParallaxSection = React__default.forwardRef(({ speed = 0.5, direction = 'vertical', scrollRef, className, children, style, 
// Destructure HTML event handlers that conflict with motion's API
onDrag: _onDrag, onDragStart: _onDragStart, onDragEnd: _onDragEnd, onAnimationStart: _onAnimationStart, ...restProps }, ref) => {
    const shouldReduceMotion = useReducedMotion();
    const internalRef = useRef(null);
    // Track scroll progress of the target element through the viewport.
    // offset: element bottom enters viewport -> element top exits viewport.
    const { scrollYProgress } = useScroll({
        target: internalRef,
        container: scrollRef,
        offset: ['start end', 'end start'],
    });
    // Map 0-1 scroll progress to a pixel displacement.
    // At progress 0 (element just entering) the offset is positive (pushed down),
    // and at progress 1 (element leaving) the offset is negative (pulled up),
    // scaled by the speed multiplier.  This creates the classic parallax feel.
    const range = 200 * speed;
    const yTransform = useTransform(scrollYProgress, [0, 1], [range, -range]);
    const xTransform = useTransform(scrollYProgress, [0, 1], [range, -range]);
    // When reduced motion is preferred, render without any parallax.
    if (shouldReduceMotion) {
        return (jsx("div", { ref: (node) => {
                internalRef.current = node;
                if (typeof ref === 'function')
                    ref(node);
                else if (ref)
                    ref.current = node;
            }, className: cn('will-change-transform', className), style: style, ...restProps, children: children }));
    }
    const motionStyle = direction === 'vertical'
        ? { y: yTransform, ...style }
        : { x: xTransform, ...style };
    return (jsx(motion.div, { ref: (node) => {
            internalRef.current = node;
            if (typeof ref === 'function')
                ref(node);
            else if (ref)
                ref.current = node;
        }, className: cn('will-change-transform', className), style: motionStyle, ...restProps, children: children }));
});
ParallaxSection.displayName = 'ParallaxSection';

export { ParallaxSection };
