<template>
  <div class="badge-wrapper">
    <span class="badge" :class="badgeClasses">
      <span v-if="dot" class="badge-dot" :class="`bg-${variant}`"></span>
      <span v-if="icon" class="badge-icon">
        <component :is="icon" class="w-3 h-3" />
      </span>
      <slot></slot>
    </span>
    <span v-if="pulse" class="badge-pulse" :class="`bg-${variant}`"></span>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'

interface Props {
  variant?: 'primary' | 'secondary' | 'accent' | 'info' | 'success' | 'warning' | 'error' | 'ghost'
  size?: 'xs' | 'sm' | 'md' | 'lg'
  outline?: boolean
  dot?: boolean
  pulse?: boolean
  icon?: any
}

const props = withDefaults(defineProps<Props>(), {
  variant: 'primary',
  size: 'md',
  outline: false,
  dot: false,
  pulse: false
})

const badgeClasses = computed(() => {
  const classes = []
  
  // Variant
  if (props.outline) {
    classes.push(`badge-outline badge-${props.variant}`)
  } else {
    classes.push(`badge-${props.variant}`)
  }
  
  // Size
  classes.push(`badge-${props.size}`)
  
  return classes
})
</script>

<style scoped>
.badge-wrapper {
  @apply relative inline-flex;
}

.badge {
  @apply inline-flex items-center gap-1 px-2.5 py-1 rounded-full font-medium;
  @apply transition-all duration-200;
}

.badge:hover {
  @apply transform scale-105;
}

.badge-xs {
  @apply text-xs px-2 py-0.5;
}

.badge-sm {
  @apply text-sm px-2 py-0.5;
}

.badge-md {
  @apply text-sm px-2.5 py-1;
}

.badge-lg {
  @apply text-base px-3 py-1.5;
}

.badge-dot {
  @apply w-2 h-2 rounded-full;
}

.badge-icon {
  @apply flex items-center justify-center;
}

.badge-pulse {
  @apply absolute inset-0 rounded-full animate-ping opacity-75;
}

/* Variant colors */
.badge-primary {
  @apply bg-primary text-primary-content;
}

.badge-secondary {
  @apply bg-secondary text-secondary-content;
}

.badge-accent {
  @apply bg-accent text-accent-content;
}

.badge-info {
  @apply bg-info text-info-content;
}

.badge-success {
  @apply bg-success text-success-content;
}

.badge-warning {
  @apply bg-warning text-warning-content;
}

.badge-error {
  @apply bg-error text-error-content;
}

.badge-ghost {
  @apply bg-base-200 text-base-content;
}

/* Outline variants */
.badge-outline {
  @apply bg-transparent border-2;
}

.badge-outline.badge-primary {
  @apply border-primary text-primary;
}

.badge-outline.badge-secondary {
  @apply border-secondary text-secondary;
}

.badge-outline.badge-accent {
  @apply border-accent text-accent;
}

.badge-outline.badge-info {
  @apply border-info text-info;
}

.badge-outline.badge-success {
  @apply border-success text-success;
}

.badge-outline.badge-warning {
  @apply border-warning text-warning;
}

.badge-outline.badge-error {
  @apply border-error text-error;
}
</style>
