import type { ServiceRow } from '@/lib/types';

/** Vendor status-page indicator (none/minor/major/critical) or "no connector" when we have no source for that provider. */
export function VendorIndicator({ v }: { v: ServiceRow['vendor_status'] }) {
  if (!v) return <span className="text-[11px] text-ink-3">no connector</span>;
  const color = v.indicator === 'none' ? 'var(--ok)' : v.indicator === 'minor' ? 'var(--warn)' : 'var(--bad)';
  return (
    <span className="inline-flex items-center gap-1.5 text-[11px] uppercase tracking-[0.08em]" style={{ color }}>
      <span className="size-1.5 rounded-full" style={{ background: color }} aria-hidden="true" />
      {v.indicator}
      {v.incidents ? <span className="num text-ink-2">({v.incidents})</span> : null}
    </span>
  );
}