<template>
  <div class="flex items-center justify-center" :class="containerClass">
    <Loader2 :class="spinnerClass" />
    <span v-if="text" class="ml-2 text-sm text-muted-foreground">{{ text }}</span>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { Loader2 } from 'lucide-vue-next'

interface Props {
  size?: 'sm' | 'md' | 'lg'
  text?: string
  fullScreen?: boolean
}

const props = withDefaults(defineProps<Props>(), {
  size: 'md',
  fullScreen: false
})

const containerClass = computed(() => {
  if (props.fullScreen) {
    return 'fixed inset-0 bg-background/80 backdrop-blur-sm z-50'
  }
  return 'p-4'
})

const spinnerClass = computed(() => {
  const sizeClasses = {
    sm: 'h-4 w-4',
    md: 'h-6 w-6',
    lg: 'h-8 w-8'
  }
  return `${sizeClasses[props.size]} animate-spin`
})
</script>