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

export const useIntersectionObserver = <T extends HTMLElement>() => {
  const [isVisible, setIsVisible] = useState(false);
  const sectionRef = useRef<T>(null);

  useEffect(() => {
    const observer = new IntersectionObserver(
      (entries) => {
        const [entry] = entries;
        if (entry.isIntersecting) {
          setIsVisible(true);
          observer.disconnect();
        }
      },
      {
        threshold: 0.1,
      },
    );

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

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

  return { sectionRef, isVisible };
};