<template>
  <span :class="['status-badge', `status-badge-${tone}`]">
    <span class="status-badge-dot" aria-hidden="true"></span>
    <span>{{ label }}</span>
  </span>
</template>

<script setup>
import { computed } from "vue";

import { getStatusLabel, getStatusTone } from "../utils/statusToneMap";

const props = defineProps({
  value: {
    type: [String, Number, Boolean, null],
    default: ""
  },
  text: {
    type: String,
    default: ""
  }
});

const label = computed(() => props.text || getStatusLabel(props.value));
const tone = computed(() => getStatusTone(props.value || props.text) || "neutral");
</script>
