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

export function ConfidenceIndicator({
  value,
  compact = false,
  className,
}: {
  value: number;
  compact?: boolean;
  className?: string;
}) {
  const level = value >= 85 ? "high" : value >= 65 ? "medium" : "low";
  const bar =
    level === "high" ? "bg-brand" : level === "medium" ? "bg-attention" : "bg-destructive";
  const text =
    level === "high" ? "text-brand-foreground" : level === "medium" ? "text-attention" : "text-destructive";

  return (
    <div className={cn("flex items-center gap-2", className)}>
      <div
        className={cn("h-1.5 overflow-hidden rounded-full bg-muted", compact ? "w-14" : "w-full min-w-24")}
        role="progressbar"
        aria-valuenow={value}
        aria-valuemin={0}
        aria-valuemax={100}
        aria-label="Local OCR extraction confidence"
      >
        <div className={cn("h-full rounded-full transition-all duration-500", bar)} style={{ width: `${value}%` }} />
      </div>
      <span className={cn("num text-[12px] font-semibold tabular-nums", text)}>{value}%</span>
      <span className="sr-only">{level} confidence</span>
    </div>
  );
}