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

<script setup lang="ts">
const props = defineProps({
  variant: {
    type: String,
    default: 'default', // default | success | warning | error | muted | primary
  },
  size: {
    type: String,
    default: 'sm', // xs | sm | md
  },
})

const variantMap: Record<string, string> = {
  default: 'badge-neutral',
  success: 'badge-success',
  warning: 'badge-warning',
  error: 'badge-error',
  muted: 'badge-ghost',
  primary: 'badge-primary',
}

const sizeMap: Record<string, string> = {
  xs: 'badge-xs',
  sm: 'badge-sm',
  md: 'badge-md',
}

const badgeClass = computed(() => {
  const base = 'badge'
  const variantClass = variantMap[props.variant] || variantMap.default
  const sizeClass = sizeMap[props.size] || sizeMap.sm
  return [base, variantClass, sizeClass].join(' ')
})
</script>
