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

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