import { ShieldCheck, ShieldAlert } from 'lucide-react';
import type { VulnerabilitySummary } from '@/types';

/**
 * Compact, report-only image-scan badge (Trivy). Renders nothing when there is
 * no scan data yet. Shows a green "clean" pill, or the count of the highest
 * severities found. Title carries the full per-severity breakdown.
 */
export function VulnerabilityBadge({ summary }: { summary?: VulnerabilitySummary | null }) {
  if (!summary) return null;

  const { critical, high, medium, low, total } = summary;
  const breakdown = `Critical ${critical} · High ${high} · Medium ${medium} · Low ${low}`;

  if (total === 0) {
    return (
      <span
        className="inline-flex items-center gap-1 text-[11px] font-medium text-green-700 bg-green-50 border border-green-200 rounded-full px-2 py-0.5"
        title={breakdown}
      >
        <ShieldCheck className="w-3 h-3" /> 0 CVE
      </span>
    );
  }

  const severe = critical > 0 || high > 0;
  const cls = severe
    ? 'text-red-700 bg-red-50 border-red-200'
    : 'text-amber-700 bg-amber-50 border-amber-200';
  const label = severe ? `${critical}C / ${high}H` : `${medium}M / ${low}L`;

  return (
    <span
      className={`inline-flex items-center gap-1 text-[11px] font-medium border rounded-full px-2 py-0.5 ${cls}`}
      title={breakdown}
    >
      <ShieldAlert className="w-3 h-3" /> {label}
    </span>
  );
}