<script setup lang="ts">
defineProps<{ size?: 'sm' | 'md' | 'lg' }>()
</script>

<template>
  <div class="spinner-wrap">
    <div class="spinner" :class="size ?? 'md'" />
  </div>
</template>

<style scoped>
.spinner-wrap { display: flex; align-items: center; justify-content: center; padding: 24px; }
.spinner {
  border-radius: 50%;
  border: 3px solid rgba(34,197,94,0.2);
  border-top-color: var(--color-primary);
  animation: spin 0.8s linear infinite;
}
.sm { width: 20px; height: 20px; }
.md { width: 36px; height: 36px; }
.lg { width: 56px; height: 56px; border-width: 4px; }
@keyframes spin { to { transform: rotate(360deg); } }
</style>
