type Tone = "online" | "warning" | "offline" | "neutral";

const TONE_CLASSES: Record<Tone, string> = {
  online: "bg-status-online-bg text-status-online",
  warning: "bg-status-warning-bg text-status-warning",
  offline: "bg-status-offline-bg text-status-offline",
  neutral: "bg-status-neutral-bg text-status-neutral",
};

interface BadgeProps {
  tone: Tone;
  children: React.ReactNode;
}

export function Badge({ tone, children }: BadgeProps) {
  return (
    <span className={`inline-flex items-center gap-1.5 rounded-sm px-2 py-0.5 text-xs font-medium ${TONE_CLASSES[tone]}`}>
      <span className="h-1.5 w-1.5 rounded-full bg-current" />
      {children}
    </span>
  );
}

// Maps the domain-level statuses used across the platform (organization,
// user, session, voucher, payment...) to one of the four visual tones above,
// so every module reuses the same badge language instead of inventing new
// colors per feature.
const STATUS_TONE: Record<string, Tone> = {
  ACTIVE: "online",
  ONLINE: "online",
  PAID: "online",
  SUCCESSFUL: "online",
  AVAILABLE: "online",

  PENDING: "warning",
  PENDING_VERIFICATION: "warning",
  PROCESSING: "warning",
  DEGRADED: "warning",
  PRINTED: "warning",
  SOLD: "warning",

  SUSPENDED: "offline",
  OFFLINE: "offline",
  FAILED: "offline",
  BLOCKED: "offline",
  REVOKED: "offline",

  EXPIRED: "neutral",
  CANCELLED: "neutral",
  UNKNOWN: "neutral",
};

export function StatusBadge({ status }: { status: string }) {
  const tone = STATUS_TONE[status] ?? "neutral";
  const label = status.replaceAll("_", " ").toLowerCase();
  return <Badge tone={tone}>{label}</Badge>;
}