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

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

const variantMap: Record<string, string> = {
  neutral: 'badge-neutral',
  primary: 'badge-primary',
  outline: 'badge-outline',
  inverse: 'badge-ghost bg-white/10 text-white border border-white/40',
}

const toneMap: Record<string, string> = {
  default: '',
  success: 'badge-success',
  warning: 'badge-warning',
}

const pillClass = computed(() => {
  const base = ['badge', props.size === 'sm' ? 'badge-sm' : 'badge-md']
  const variantClass = variantMap[props.variant] || variantMap.neutral
  const toneClass = toneMap[props.tone] || ''
  return [base, variantClass, toneClass].flat().filter(Boolean).join(' ')
})
</script>
