"use client";

import { useEffect, useRef } from "react";
import { useBlogTelemetry } from "../telemetry";

interface ScrollLoggerProps {
  eventName: string;
  data: Record<string, unknown>;
}

// Fires a single client telemetry event on the user's first scroll. Renders nothing.
export default function ScrollLogger({ eventName, data }: ScrollLoggerProps) {
  const telemetry = useBlogTelemetry();
  const fired = useRef(false);
  const eventNameRef = useRef(eventName);
  const dataRef = useRef(data);

  useEffect(() => {
    const onScroll = () => {
      if (fired.current) return;
      fired.current = true;
      telemetry.logClientEvent(eventNameRef.current, dataRef.current);
    };
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, [telemetry]);

  return null;
}