"use client";

import { cn } from "@/lib/utils";
import { useLanguage } from "@/lib/i18n/context";
import { opportunityLevel } from "@/lib/scoring/config";

const toneClasses: Record<ReturnType<typeof opportunityLevel>, string> = {
  limited: "bg-destructive/15 text-destructive",
  fair: "bg-warning/15 text-warning",
  good: "bg-success/15 text-success",
  excellent: "bg-success/20 text-success",
};

/** Compact numeric score pill + qualitative label — the Market Explorer
 * snapshot table's version of the same opportunityLevel() tiering already
 * used on the product detail page, just laid out for a table cell instead
 * of a full breakdown panel. */
export function OpportunityScoreBadge({ score }: { score: number }) {
  const { t } = useLanguage();
  const labels = t.dashboard.overview.snapshot.scoreLabels;
  const level = opportunityLevel(score);

  return (
    <div className="flex items-center gap-2">
      <span className={cn("inline-flex h-8 min-w-9 items-center justify-center rounded-lg px-2 text-sm font-bold tabular-nums", toneClasses[level])}>
        {score}
      </span>
      <span className="text-xs text-muted-foreground">{labels[level]}</span>
    </div>
  );
}