<script setup>
defineProps({
  variant: { type: String, default: 'info' }, // success | warning | info | unknown
})
</script>

<template>
  <span
    :class="[
      'inline-flex items-center gap-1 text-xs font-medium px-2.5 py-0.5 rounded-full',
      variant === 'success' && 'bg-green-50 text-green-600',
      variant === 'warning' && 'bg-amber-50 text-amber-600',
      variant === 'info'    && 'bg-blue-50 text-[#1a56db]',
      variant === 'unknown' && 'bg-gray-100 text-gray-500',
    ]"
  >
    <slot />
  </span>
</template>
