<template>
  <div class="flex flex-col items-center justify-center h-full py-8">
    <div :class="['relative', sizeClass]" role="status" aria-label="در حال بارگذاری">
      <!-- ساده و مینیمال اسپینر دایره‌ای با tail پرایمری (آبی) -->
      <div class="w-16 h-16 rounded-full border-8 border-gray-200 dark:border-gray-700 border-t-primary-500 dark:border-t-primary-500 animate-spin"></div>
    </div>
    
    <p class="mt-6 text-lg font-medium text-gray-700 dark:text-gray-300">{{ loadingText }}</p>
    <p class="mt-2 text-sm text-primary-600 dark:text-primary-400 animate-pulse">لطفاً صبر کنید...</p>
  </div>
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
  loadingText: { type: String, default: 'در حال بارگذاری...' },
  loadingSize: { type: String, default: 'md' }, // sm, md, lg
})

const sizeClass = computed(() => {
  switch (props.loadingSize) {
    case 'sm':
      return 'scale-75'
    case 'lg':
      return 'scale-150'
    default:
      return ''
  }
})
</script>