<template>
  <!-- Corner Sticker Badge -->
  <div
    v-if="type === 'sticker'"
    class="absolute top-2 right-2 z-10"
    :title="title"
  >
    <div
      class="relative bg-gradient-to-br from-purple-500 to-purple-600 text-white px-3 py-2 rounded-lg shadow-lg border-2 border-purple-400/50 transform rotate-3 hover:rotate-0 transition-transform"
    >
      <div class="flex flex-col items-center gap-0.5">
        <Icon name="heroicons:chat-bubble-left-right-solid" class="w-4 h-4" />
        <span
          class="text-[10px] font-bold uppercase tracking-wide leading-tight"
          >Peer<br />Support</span
        >
      </div>
      <!-- Sparkle effect -->
      <div
        class="absolute -top-1 -right-1 w-2 h-2 bg-yellow-300 rounded-full animate-pulse"
      ></div>
    </div>
  </div>

  <!-- Inline Badge -->
  <div
    v-else
    :class="[
      'inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full border text-xs font-medium transition-all',
      variant === 'default' &&
        'bg-purple-500/20 text-purple-300 border-purple-500/40 hover:bg-purple-500/30',
      variant === 'subtle' &&
        'bg-purple-500/10 text-purple-400 border-purple-500/20',
      variant === 'solid' &&
        'bg-purple-500 text-white border-purple-600 hover:bg-purple-600',
    ]"
    :title="title"
  >
    <Icon
      name="heroicons:chat-bubble-left-right"
      :class="[
        'w-3.5 h-3.5',
        variant === 'default' && 'text-purple-300',
        variant === 'subtle' && 'text-purple-400',
        variant === 'solid' && 'text-white',
      ]"
    />
    <span>{{ label }}</span>
  </div>
</template>

<script setup>
const props = defineProps({
  /**
   * Badge type - inline or corner sticker
   * @values inline, sticker
   */
  type: {
    type: String,
    default: "inline",
    validator: (value) => ["inline", "sticker"].includes(value),
  },
  /**
   * Display variant of the badge (for inline type)
   * @values default, subtle, solid
   */
  variant: {
    type: String,
    default: "default",
    validator: (value) => ["default", "subtle", "solid"].includes(value),
  },
  /**
   * Custom label text (defaults to "Offering Peer Support")
   */
  label: {
    type: String,
    default: "Offering Peer Support",
  },
  /**
   * Tooltip/title text
   */
  title: {
    type: String,
    default: "This member offers 1:1 peer support sessions",
  },
});
</script>
