// src/components/backlink/dr-badge.tsx
import { RingGauge, scoreColor } from "@/components/ui/ring-gauge";

/**
 * Domain Rating gauge — ring with the value centered. INVERTED vs KD:
 * high DR = strong = green, low = red. null = unknown = muted "—".
 */
export function DrBadge({ value }: { value: number | null }) {
  if (value === null) {
    return (
      <span
        className="inline-flex items-center justify-center font-mono text-muted-foreground text-xs tabular-nums"
        style={{ width: 26, height: 26 }}
      >
        —
      </span>
    );
  }
  return (
    <RingGauge
      fraction={value / 100}
      label={String(value)}
      color={scoreColor(1 - value / 100)}
      size={26}
      title={`DR ${value}/100`}
    />
  );
}