<script>
  let { status = "unknown" } = $props();
  const normalized = $derived(String(status).toLowerCase());
  const tone = $derived(
    ["completed", "success", "ok", "enabled", "delivered"].includes(normalized)
      ? "ok"
      : ["failed", "error", "cancelled", "disabled", "refused", "timed_out"].includes(normalized)
        ? "fail"
        : ["running", "pending", "delivering", "alert", "unknown", "interrupted"].includes(normalized) ? "run" : ""
  );
</script>

<span class="badge {tone}">{status}</span>
