import type { ReactNode } from "react";
import { cn } from "./cn";

type Tone = "neutral" | "brand" | "accent" | "success" | "warn" | "danger";

const tones: Record<Tone, string> = {
  neutral: "bg-ink-800 text-slate-400",
  brand: "bg-brand/15 text-brand-400",
  accent: "bg-accent/15 text-accent-400",
  success: "bg-success/15 text-success",
  warn: "bg-warn/15 text-warn",
  danger: "bg-danger/15 text-danger",
};

export function Badge({ tone = "neutral", className, children }: { tone?: Tone; className?: string; children: ReactNode }) {
  return (
    <span className={cn("inline-flex items-center gap-1 rounded px-1.5 py-0.5 text-[9px] font-medium leading-none", tones[tone], className)}>
      {children}
    </span>
  );
}

// Dot 状态小圆点（可脉冲）。
export function Dot({ tone = "neutral", pulse }: { tone?: Tone | "running"; pulse?: boolean }) {
  const color =
    tone === "success"
      ? "bg-success"
      : tone === "danger"
        ? "bg-danger"
        : tone === "warn"
          ? "bg-warn"
          : tone === "running" || tone === "accent"
            ? "bg-accent"
            : tone === "brand"
              ? "bg-brand"
              : "bg-slate-600";
  return <span className={cn("h-2 w-2 shrink-0 rounded-full", color, pulse && "animate-pulse")} />;
}