<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: 'bg-[#f6f1ea] text-[#5f4b33]',
  primary: 'bg-[#2f2418] text-white',
  outline: 'bg-transparent text-[#2f2418] ring-1 ring-[#cbbca6]',
  inverse: 'bg-white/10 text-white border border-white/40',
}

const toneMap: Record<string, string> = {
  default: '',
  success: 'bg-emerald-100 text-emerald-700',
  warning: 'bg-amber-100 text-amber-700',
}

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