"use client";

import { Badge } from "@/components/ui/badge";
import { cn } from "@/lib/utils";
import { useLanguage } from "@/lib/i18n/context";
import { confidenceLevel } from "@/lib/scoring/config";

const toneClasses: Record<ReturnType<typeof confidenceLevel>, string> = {
  low: "border-destructive/30 bg-destructive/15 text-destructive",
  medium: "border-warning/30 bg-warning/15 text-warning",
  high: "border-success/30 bg-success/15 text-success",
};

/** Renders the Confidence Score as a low/medium/high badge — the raw 0-100
 * number is shown alongside it wherever space allows, this is the
 * at-a-glance version used on product cards. */
export function ConfidenceBadge({ score, className }: { score: number; className?: string }) {
  const { t } = useLanguage();
  const level = confidenceLevel(score);
  const label =
    level === "low" ? t.productData.confidenceLow : level === "medium" ? t.productData.confidenceMedium : t.productData.confidenceHigh;

  return (
    <Badge variant="outline" className={cn("font-medium", toneClasses[level], className)}>
      {label}
    </Badge>
  );
}