"use client";

import { useEffect } from "react";
import { useRouter } from "next/navigation";
import { LoaderCircle } from "lucide-react";

const POLL_MS = 3000;

/**
 * Shown only while a bulk run is active. Re-fetches the dashboard every few
 * seconds so rows update as results land; once the run ends the server stops
 * rendering this component, which ends the polling.
 */
export function RunInProgress({ label }: { label: string }) {
  const router = useRouter();

  useEffect(() => {
    const timer = setInterval(() => router.refresh(), POLL_MS);
    return () => clearInterval(timer);
  }, [router]);

  return (
    <p role="status" className="mb-4 flex items-center gap-2 rounded-lg border border-slate-200 bg-white px-4 py-2.5 text-sm text-slate-700">
      <LoaderCircle className="size-4 animate-spin text-slate-500" aria-hidden />
      {label}
    </p>
  );
}