<template>
    <span
        class="inline-flex items-center gap-1 rounded-full px-2.5 py-0.5 text-xs font-medium whitespace-nowrap"
        :class="variantClass"
    >
        <Icon v-if="icon" :name="icon" size="14" />
        {{ label }}
    </span>
</template>

<script setup lang="ts">
type Variant = 'neutral' | 'info' | 'success' | 'warning' | 'danger'

const props = withDefaults(defineProps<{
    label: string
    variant?: Variant
    icon?: string
}>(), {
    variant: 'neutral',
    icon: '',
})

const VARIANT_CLASSES: Record<Variant, string> = {
    neutral: 'bg-neutral-100 text-neutral-700',
    info: 'bg-blue-100 text-blue-800',
    success: 'bg-green-100 text-green-800',
    warning: 'bg-amber-100 text-amber-800',
    danger: 'bg-red-100 text-red-800',
}

const variantClass = computed(() => VARIANT_CLASSES[props.variant])
</script>
