<template>
  <div class="text-center">
    <img 
      v-if="variant === 'pulse'"
      src="/logo_lediscord.png" 
      alt="LeDiscord Logo" 
      :class="[
        'mx-auto animate-pulse',
        size === 'small' ? 'h-8 w-auto' : 
        size === 'medium' ? 'h-12 w-auto' : 
        'h-16 w-auto'
      ]"
    >
    <img 
      v-else-if="variant === 'spinner'"
      src="/logo_lediscord.png" 
      alt="LeDiscord Logo" 
      :class="[
        'mx-auto animate-spin',
        size === 'small' ? 'h-5 w-auto' : 
        size === 'medium' ? 'h-6 w-auto' : 
        'h-8 w-auto'
      ]"
    >
    <p v-if="showText" class="text-sm text-gray-600 mt-2">{{ text || 'Chargement...' }}</p>
  </div>
</template>

<script setup>
defineProps({
  size: {
    type: String,
    default: 'medium',
    validator: (value) => ['small', 'medium', 'large'].includes(value)
  },
  variant: {
    type: String,
    default: 'pulse',
    validator: (value) => ['pulse', 'spinner'].includes(value)
  },
  text: {
    type: String,
    default: ''
  },
  showText: {
    type: Boolean,
    default: true
  }
})
</script>
