<template>
  <!-- Corner Sticker Badge -->
  <div
    v-if="type === 'sticker'"
    class="absolute top-2 right-2 z-10"
    :title="title"
  >
    <div
      class="relative transform rotate-3 hover:rotate-0 transition-transform"
      style="width: 60px; height: 66px"
    >
      <!-- Shield background -->
      <svg
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 1000 1000"
        class="absolute inset-0 w-full h-full drop-shadow-lg"
      >
        <path
          d="M500 70 150 175.3v217.1C150 785 500 930 500 930s350-145 350-537.6V175.2L500 70Z"
          class="fill-candlelight-500"
        />
      </svg>

      <!-- Content on top of shield -->
      <div class="absolute inset-0 flex flex-col items-center justify-center">
        <Icon
          name="heroicons:chat-bubble-left-right-solid"
          class="w-6 h-6 text-white"
        />
      </div>

      <!-- Sparkle effect -->
      <div
        class="absolute top-0 right-1 w-2 h-2 bg-candlelight-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-candlelight-900/20 text-candlelight-400 border-candlelight-500/40 hover:bg-candlelight-900/30',
      variant === 'subtle' &&
        'bg-candlelight-900/10 text-candlelight-500 border-candlelight-500/20',
      variant === 'solid' &&
        'bg-candlelight-500 text-white border-candlelight-600 hover:bg-candlelight-600',
    ]"
    :title="title"
  >
    <Icon
      name="heroicons:chat-bubble-left-right"
      :class="[
        'w-3.5 h-3.5',
        variant === 'default' && 'text-candlelight-400',
        variant === 'subtle' && 'text-candlelight-500',
        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>
