<script setup>
defineProps({
    size: {
        type: String,
        default: 'md',
        validator: (v) => ['sm', 'md', 'lg'].includes(v),
    },
    label: {
        type: String,
        default: '',
    },
})

const sizeClasses = {
    sm: 'h-4 w-4 border-2',
    md: 'h-6 w-6 border-2',
    lg: 'h-10 w-10 border-[3px]',
}
</script>

<template>
    <span class="inline-flex items-center gap-2" role="status" aria-live="polite">
        <span
            class="animate-spin rounded-full border-current border-r-transparent opacity-75"
            :class="sizeClasses[size]"
            aria-hidden="true"
        />
        <span v-if="label" class="text-sm text-gray-500">{{ label }}</span>
        <span class="sr-only">{{ label || 'Wird geladen…' }}</span>
    </span>
</template>
