<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 : centralise les paires bg/text répétées (zinc/emerald/amber/sky/red).
import { computed } from 'vue';

type Tone = 'zinc' | 'emerald' | 'amber' | 'sky' | 'red';

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

const TONES: Record<Tone, string> = {
  zinc: 'bg-zinc-800 text-zinc-400',
  emerald: 'bg-emerald-950 text-emerald-400',
  amber: 'bg-amber-950 text-amber-300',
  sky: 'bg-sky-950 text-sky-300',
  red: 'bg-red-950 text-red-400',
};
const DOTS: Record<Tone, string> = {
  zinc: 'bg-zinc-500',
  emerald: 'bg-emerald-400',
  amber: 'bg-amber-300',
  sky: 'bg-sky-300',
  red: 'bg-red-400',
};

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