<script setup>
import { computed } from 'vue'
import { twMerge } from 'tailwind-merge'

const props = defineProps({
  variant: { type: String, default: 'info', validator: v => ['critical', 'warning', 'info', 'success'].includes(v) },
  size: { type: String, default: 'sm' },
})

const classes = computed(() => {
  const base = 'inline-flex items-center font-medium rounded-full'
  const sizes = { xs: 'px-2 py-2 text-xs', sm: 'px-2 py-2 text-xs', md: 'px-4 py-2 text-sm' }
  const variants = {
    critical: 'bg-severity-critical/10 text-severity-critical dark:bg-severity-critical-dark/20 dark:text-red-300',
    warning:  'bg-severity-warning/10 text-severity-warning dark:bg-severity-warning-dark/20 dark:text-amber-300',
    info:     'bg-severity-info/10 text-severity-info dark:bg-severity-info-dark/20 dark:text-blue-300',
    success:  'bg-green-100 text-green-800 dark:bg-green-900/20 dark:text-green-300',
  }
  return twMerge(base, sizes[props.size], variants[props.variant])
})
</script>

<template>
  <span :class="classes"><slot /></span>
</template>