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

export function useHeadsObserver() {
  const observer = useRef<any>();
  const [activeId, setActiveId] = useState<any>("");

  useEffect(() => {
    const handleObsever = (entries) => {
      entries.forEach((entry) => {
        if (entry?.isIntersecting) {
          setActiveId(entry.target.id);
        }
      });
    };

    observer.current = new IntersectionObserver(handleObsever, {
      rootMargin: "28% 0% -87% 0%",
    });

    const elements = document.querySelectorAll("h1, h2, h3, h4");
    elements.forEach((elem) => observer.current.observe(elem));

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

  return { activeId };
}