"use client";

import { Progress } from "@/components/ui/progress";
import { cn } from "@/lib/utils";

interface PatienceMeterProps {
  patience: number;
  className?: string;
}

const TONES = {
  green: "bg-emerald-500/20 [&>[data-slot=progress-indicator]]:bg-emerald-500",
  amber: "bg-amber-500/20 [&>[data-slot=progress-indicator]]:bg-amber-500",
  red: "bg-red-500/20 [&>[data-slot=progress-indicator]]:bg-red-500",
} as const;

/**
 * The vendor's willingness to keep negotiating (NPC vendors only). Rises with
 * every bargaining round and sharply for lowball offers; at 100 the
 * negotiation closes and the buyer can only buy at the asking price.
 */
export function PatienceMeter({ patience, className }: PatienceMeterProps) {
  const value = Math.max(0, Math.min(100, patience));
  const tone = value >= 80 ? "red" : value >= 50 ? "amber" : "green";

  return (
    <div className={cn("flex flex-col gap-1.5", className)}>
      <div className="flex items-center justify-between">
        <span className="text-xs text-muted-foreground">Vendor patience</span>
        <span
          className={cn(
            "font-mono text-xs",
            value >= 80 ? "text-red-400" : "text-muted-foreground",
          )}
        >
          {value}%
        </span>
      </div>
      <Progress value={value} className={TONES[tone]} />
    </div>
  );
}