import { useCallback } from 'react';
import { api } from '../api';
import { usePolling } from '../hooks/usePolling';

export function PipelineStatus() {
  const fetcher = useCallback(() => api.health(), []);
  const { data, error } = usePolling(fetcher, 5000);

  const dbOk = data?.db === 'connected';
  const serverOk = !error && data?.status === 'ok';

  return (
    <div className="flex items-center gap-3 text-xs">
      <StatusDot ok={serverOk} label="Server" />
      <StatusDot ok={dbOk} label="Postgres" />
    </div>
  );
}

function StatusDot({ ok, label }: { ok: boolean; label: string }) {
  return (
    <span className="flex items-center gap-1.5">
      <span
        className={`w-2 h-2 rounded-full ${
          ok ? 'bg-success-dot shadow-[0_0_6px_rgba(52,211,153,0.4)]' : 'bg-danger'
        }`}
      />
      <span className="text-text-muted">{label}</span>
    </span>
  );
}
