import { type RefObject, useEffect, useRef } from 'react';

import { trackEvent } from '@/lib/analytics';

/**
 * Tracks when a section becomes visible in the viewport.
 * Fires the event once per section per page load.
 */
export function useSectionVisibility(
  sectionId: string,
  eventName: string,
  eventParams?: Record<string, string | number | boolean>,
): RefObject<HTMLElement | null> {
  const ref = useRef<HTMLElement | null>(null);
  const firedRef = useRef(false);

  useEffect(() => {
    const el = ref.current;
    if (!el || firedRef.current) return;

    const observer = new IntersectionObserver(
      ([entry]) => {
        if (entry.isIntersecting && !firedRef.current) {
          firedRef.current = true;
          trackEvent(eventName, { section: sectionId, ...eventParams });
          observer.disconnect();
        }
      },
      { threshold: 0.1 },
    );

    observer.observe(el);
    return () => observer.disconnect();
  }, [sectionId, eventName, eventParams]);

  return ref;
}