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

export default function FadeInSection({
  children,
  style,
}: Readonly<{
  children: React.ReactNode;
  style?: React.CSSProperties;
}>) {
  const domRef = useRef(null);
  const [isVisible, setIsVisible] = useState(false);

  useEffect(() => {
    const current = domRef.current;

    const observer = new IntersectionObserver(
      (entries) => {
        entries.forEach((entry) => setIsVisible(entry.isIntersecting));
      },
      { threshold: 0.75 }
    );

    if (current) {
      observer.observe(current);
    }

    return () => {
      if (current) {
        observer.unobserve(current);
      }
    };
  }, []);

  return (
    <div
      className={`fade-in-section ${isVisible ? "is-visible" : ""}`}
      ref={domRef}
      style={style}
    >
      {children}
    </div>
  );
}