<template>
  <span class="badge" :class="toneClass">
    <span v-if="dot" class="inline-block h-1.5 w-1.5 rounded-full" :class="dotClass" />
    <slot />
  </span>
</template>

<script setup lang="ts">
// Pastille d'état : les paires bg/text et couleurs de point vivent dans lib/status-tokens
// (partagées avec SessionStateBadge).
import { computed } from 'vue';
import { TONE_BADGE, TONE_DOT, type Tone } from '../../lib/status-tokens';

const props = withDefaults(defineProps<{ tone?: Tone; dot?: boolean; pulse?: boolean }>(), {
  tone: 'zinc',
});

const toneClass = computed(() => TONE_BADGE[props.tone]);
const dotClass = computed(() => [TONE_DOT[props.tone], props.pulse ? 'animate-pulse' : '']);
</script>
