<script setup lang="ts">
import { computed } from "vue";
import { statusTone } from "@/utils";

const props = defineProps<{ status?: string | null; label?: string | null }>();
const tone = computed(() => statusTone(props.status));
const displayLabel = computed(() => props.label || props.status || "pending");
</script>

<template>
  <span class="status-badge" :data-tone="tone">{{ displayLabel }}</span>
</template>
