<script setup>
defineProps({
  size: {
    type: String,
    default: 'md'
  },
  text: {
    type: String,
    default: ''
  }
})

const sizeClasses = {
  sm: 'w-4 h-4 border-2',
  md: 'w-8 h-8 border-3',
  lg: 'w-12 h-12 border-4',
}
</script>

<template>
  <div class="flex flex-col items-center justify-center gap-3">
    <div 
      class="rounded-full border-surface-200 dark:border-gray-600 border-t-primary-500 dark:border-t-primary-400 animate-spin"
      :class="sizeClasses[size || 'md']"
    />
    <span v-if="text" class="text-sm text-gray-500 dark:text-gray-400">{{ text }}</span>
  </div>
</template>
