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

import React, { forwardRef } from "react";
import { useParallax } from "@/hooks/use-parallax";
import { ParallaxElementProps } from "@/lib/parallax/utils";

export const ParallaxElement = forwardRef<HTMLDivElement, ParallaxElementProps>(
  (
    {
      children,
      speed = 0.5,
      direction = "up",
      className = "",
      style,
      easing = "power1.out",
      shouldPause = false,
      ...props
    },
    ref
  ) => {
    const parallaxRef = useParallax({
      speed,
      direction,
      easing,
      shouldPause,
    });

    const combinedRef = (node: HTMLDivElement) => {
      if (typeof ref === "function") {
        ref(node);
      } else if (ref) {
        ref.current = node;
      }
      (parallaxRef as React.MutableRefObject<HTMLDivElement | null>).current =
        node;
    };

    return (
      <div
        ref={combinedRef}
        className={`parallax-element ${className}`}
        style={{
          willChange: "transform",
          ...style,
        }}
        data-parallax-speed={speed}
        data-parallax-direction={direction}
        {...props}
      >
        {children}
      </div>
    );
  }
);

ParallaxElement.displayName = "ParallaxElement";