"use client";

import { useEffect, useRef, useState } from "react";

interface ScrollTextRevealProps {
  children: React.ReactNode;
  className?: string;
  backgroundColor?: string;
  textColor?: string;
  revealColor?: string;
}

export default function ScrollTextReveal({
  children,
  className = "",
  backgroundColor = "#092454",
  textColor = "#1a1a1a",
  revealColor = "#ffffff",
}: ScrollTextRevealProps) {
  const containerRef = useRef<HTMLDivElement>(null);
  const [isVisible, setIsVisible] = useState(false);

  useEffect(() => {
    if (!containerRef.current) return;

    const observer = new IntersectionObserver(
      (entries) => {
        entries.forEach((entry) => {
          if (entry.isIntersecting) {
            setIsVisible(true);
          } else {
            setIsVisible(false);
          }
        });
      },
      {
        threshold: 0.3, // Se activa cuando el 30% del elemento es visible
        rootMargin: "0px 0px -20% 0px", // Se activa un poco antes de que esté completamente visible
      }
    );

    observer.observe(containerRef.current);

    return () => {
      observer.disconnect();
    };
  }, []);

  return (
    <div
      ref={containerRef}
      className={`relative transition-all duration-500 ease-out ${className}`}
      style={{ backgroundColor }}
    >
      <div
        className="relative z-10 transition-colors duration-500 ease-out"
        style={{
          color: isVisible ? revealColor : textColor,
        }}
      >
        {children}
      </div>
    </div>
  );
}