<script setup>
// tipo: ok | alerta | error | neutro
defineProps({ tipo: { type: String, default: 'neutro' }, punto: Boolean })
const clases = { ok: 'badge-ok', alerta: 'badge-alerta', error: 'badge-error', neutro: 'badge-neutro' }
</script>

<template>
  <span :class="clases[tipo] || 'badge-neutro'">
    <span
      v-if="punto"
      class="w-1.5 h-1.5 rounded-full"
      :class="{ ok: 'bg-green-500', alerta: 'bg-amber-500', error: 'bg-red-500', neutro: 'bg-gray-400' }[tipo]"
    ></span>
    <slot />
  </span>
</template>
