import { useEffect, useState } from "react";

/**
 * Tracks which section ID is currently in view.
 * Uses IntersectionObserver with rootMargin: '-25% 0px -65% 0px'
 * so the active section updates as the user scrolls through content.
 */
export function useSectionObserver(sectionIds: readonly string[]): string | null {
  const [activeId, setActiveId] = useState<string | null>(null);

  useEffect(() => {
    const observer = new IntersectionObserver(
      (entries) => {
        entries.forEach((entry) => {
          if (entry.isIntersecting) {
            setActiveId(entry.target.id);
          }
        });
      },
      { rootMargin: "-25% 0px -65% 0px" },
    );

    sectionIds.forEach((id) => {
      const el = document.getElementById(id);
      if (el) observer.observe(el);
    });

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

  return activeId;
}