import clsx from "clsx";

const tones: Record<string, string> = {
  paid: "success",
  pending: "soft",
  succeeded: "success",
  running: "warn",
  failed: "danger",
  unused: "success",
  used: "ghost",
  disabled: "danger",
  rewarded: "success",
};

export function StatusBadge({ value }: { value: string }) {
  const tone = tones[value] ?? "soft";
  return (
    <span
      className={clsx("status-badge", {
        "tone-soft": tone === "soft",
        "tone-success": tone === "success",
        "tone-warn": tone === "warn",
        "tone-danger": tone === "danger",
        "tone-ghost": tone === "ghost",
      })}
    >
      {value}
    </span>
  );
}