"use client";

import { useLibrarySyncStatus } from "@/hooks/use-library-sync";

export function SyncStatusBar() {
  const { data: statuses } = useLibrarySyncStatus();
  if (!statuses || statuses.length === 0) return null;

  return (
    <div className="border-b border-zinc-800 bg-zinc-900 px-6 py-1.5">
      <div className="flex flex-wrap gap-4">
        {statuses.map(s => (
          <span key={s.id} className="text-xs text-zinc-500">
            {s.provider_id}:{" "}
            {s.status === "running" ? (
              <span className="text-yellow-400">syncing…</span>
            ) : s.status === "error" ? (
              <span className="text-red-400">error</span>
            ) : (
              <span className="text-zinc-400">
                {s.items_found.toLocaleString()} items
                {s.finished_at ? ` · synced ${new Date(s.finished_at).toLocaleTimeString()}` : ""}
              </span>
            )}
          </span>
        ))}
      </div>
    </div>
  );
}