"use client";

import React from "react";
import { useScrollTriggerParallax } from "@/lib/parallax/hooks";

interface ParallaxBackgroundProps {
  children: React.ReactNode;
  speed?: number;
  direction?: "up" | "down";
  className?: string;
  imageUrl?: string;
  overlay?: boolean;
  overlayColor?: string;
  minHeight?: string;
}

export const ParallaxBackground: React.FC<ParallaxBackgroundProps> = ({
  children,
  speed = 0.3,
  direction = "down",
  className = "",
  imageUrl,
  overlay = false,
  overlayColor = "rgba(0,0,0,0.3)",
  minHeight = "60vh",
}) => {
  const backgroundRef = useScrollTriggerParallax({
    speed,
    direction,
    start: "top bottom",
    end: "bottom top",
    scrub: 1,
  });

  return (
    <section
      className={`parallax-background relative overflow-hidden ${className}`}
      style={{ minHeight }}
    >
      {imageUrl && (
        <div
          ref={backgroundRef as React.RefObject<HTMLDivElement>}
          className="absolute inset-0 bg-cover bg-center bg-no-repeat"
          style={{
            backgroundImage: `url(${imageUrl})`,
            willChange: "transform",
            transform: "translateZ(0)",
          }}
        />
      )}
      {overlay && (
        <div
          className="absolute inset-0"
          style={{ backgroundColor: overlayColor }}
        />
      )}
      <div className="relative z-10 container mx-auto px-4 h-full flex items-center justify-center">
        {children}
      </div>
    </section>
  );
};