<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: 'bg-[#f6f1ea] text-[#5f4b33]',
  success: 'bg-emerald-100 text-emerald-700',
  warning: 'bg-amber-100 text-amber-700',
  error: 'bg-rose-100 text-rose-700',
  muted: 'bg-[#efe7da] text-[#8a7761]',
  primary: 'bg-[#2f2418] text-white',
}

const sizeMap: Record<string, string> = {
  xs: 'px-2 py-1 text-[10px]',
  sm: 'px-3 py-1 text-xs',
  md: 'px-3.5 py-1.5 text-sm',
}

const badgeClass = computed(() => {
  const base = 'inline-flex items-center rounded-full font-semibold'
  const variantClass = variantMap[props.variant] || variantMap.default
  const sizeClass = sizeMap[props.size] || sizeMap.sm
  return [base, variantClass, sizeClass].join(' ')
})
</script>
