<template>
  <span class="status-label" :class="`status-label--${tone}`">
    <span class="status-label__dot"></span>
    <span class="status-label__text">{{ label }}</span>
  </span>
</template>

<script setup>
defineProps({
  tone: { type: String, default: 'info', validator: v => ['active', 'success', 'warning', 'danger', 'info'].includes(v) },
  label: { type: String, required: true }
})
</script>

<style scoped>
.status-label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
}
.status-label__dot {
  width: var(--dot-size, 6px);
  height: var(--dot-size, 6px);
  border-radius: 50%;
  flex-shrink: 0;
}
.status-label--active .status-label__dot { background: var(--color-success, #2e9d65); }
.status-label--success .status-label__dot { background: var(--color-success, #2e9d65); }
.status-label--warning .status-label__dot { background: var(--color-warning, #c98219); }
.status-label--danger .status-label__dot { background: var(--color-danger, #c94a4a); }
.status-label--info .status-label__dot { background: var(--color-text-muted, #8a97a8); }
.status-label__text { color: var(--color-text-secondary, #5f6b7a); }
</style>
