<script setup>
import { computed } from 'vue';
import { cn } from '@/lib/utils';

const props = defineProps({
  variant: {
    type: String,
    default: 'default',
    validator: (v) => ['default', 'secondary', 'success', 'warning', 'danger', 'pink', 'outline'].includes(v)
  },
  class: String
});

const variantClasses = {
  default: 'glass glass-border',
  secondary: 'bg-muted/20 text-muted',
  success: 'bg-green-400/20 text-green-400 border border-green-400/30',
  warning: 'bg-yellow-400/20 text-yellow-400 border border-yellow-400/30',
  danger: 'bg-red-400/20 text-red-400 border border-red-400/30',
  pink: 'bg-pink-400/20 text-pink-400 border border-pink-400/30',
  outline: 'border border-border bg-transparent'
};

const classes = computed(() => cn(
  'inline-flex items-center gap-1.5 px-2 py-1 rounded-full text-xs font-medium',
  variantClasses[props.variant],
  props.class
));
</script>

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