"use client";

import { useRef, useEffect } from "react";

interface InfiniteScrollSentinelProps {
  onVisible: () => void;
  isLoading: boolean;
}

export function InfiniteScrollSentinel({ onVisible, isLoading }: InfiniteScrollSentinelProps) {
  const ref = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const obs = new IntersectionObserver(
      ([entry]) => {
        if (entry?.isIntersecting && !isLoading) onVisible();
      },
      { threshold: 0.1 },
    );
    obs.observe(el);
    return () => obs.disconnect();
  }, [isLoading, onVisible]);

  return (
    <div ref={ref} className="h-6 flex items-center justify-center">
      {isLoading && (
        <div className="w-4 h-4 border-2 border-brand-500 border-t-transparent rounded-full animate-spin" />
      )}
    </div>
  );
}
