<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
  },
})

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

const toneMap: Record<string, string> = {
  default: '',
  success: 'text-primary',
  warning: 'text-neutral-text/80',
}

const pillClass = computed(() => {
  const base = 'inline-flex items-center gap-2 text-caption font-semibold px-3 py-1.5 rounded-full'
  const variantClass = variantMap[props.variant] || variantMap.neutral
  const toneClass = toneMap[props.tone] || ''
  return [base, variantClass, toneClass].filter(Boolean).join(' ')
})
</script>
