dashboard/src/components/StatusBadge.jsx

const TONE_CLASSES = {
  neutral: "border-white/10 bg-white/5 text-slate-200",
  success: "border-emerald-300/30 bg-emerald-400/10 text-emerald-100",
  warning: "border-amber-300/30 bg-amber-400/10 text-amber-100",
  danger: "border-rose-300/30 bg-rose-400/10 text-rose-100",
  info: "border-cyan-300/30 bg-cyan-400/10 text-cyan-100",
}

export default function StatusBadge({ label, tone = "neutral", pulse = false }) {
  return (
    <span
      className={`inline-flex items-center gap-2 rounded-full border px-3 py-2 text-xs font-medium uppercase tracking-[0.24em] ${TONE_CLASSES[tone] || TONE_CLASSES.neutral}`}
    >
      <span
        className={`h-2.5 w-2.5 rounded-full bg-current ${pulse ? "animate-pulse" : ""}`}
      />
      {label}
    </span>
  )
}