s2f/frontend/components/mapping/ConfidenceBadge.tsx

"use client";

import { cn } from "@/lib/utils";

interface ConfidenceBadgeProps {
  confidence: number;
  showLabel?: boolean;
  className?: string;
}

export function ConfidenceBadge({
  confidence,
  showLabel = true,
  className,
}: ConfidenceBadgeProps) {
  const getLevel = (value: number) => {
    if (value > 0.9) return "high";
    if (value >= 0.7) return "medium";
    return "low";
  };

  const getLabel = (value: number) => {
    if (value > 0.9) return "高";
    if (value >= 0.7) return "中";
    return "低";
  };

  const level = getLevel(confidence);
  const label = getLabel(confidence);

  return (
    <span
      className={cn(
        "inline-flex items-center px-2 py-0.5 rounded text-xs font-medium",
        level === "high" && "bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-300",
        level === "medium" && "bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-300",
        level === "low" && "bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-300",
        className
      )}
    >
      {showLabel ? label : `${(confidence * 100).toFixed(0)}%`}
    </span>
  );
}

export default ConfidenceBadge;