<template>
  <div class="spinner" :class="`spinner--${size ?? 'md'}`" role="status">
    <svg viewBox="0 0 24 24" fill="none" class="spinner__ring">
      <circle cx="12" cy="12" r="9" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-dasharray="56.5" stroke-dashoffset="14" />
    </svg>
    <span class="sr-only">{{ label ?? 'Загрузка...' }}</span>
  </div>
</template>

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

<style scoped lang="scss">
.spinner {
  display: inline-flex;
  color: var(--color-signal);

  &__ring {
    animation: spin 0.9s linear infinite;
  }

  &--sm svg {
    width: 16px;
    height: 16px;
  }
  &--md svg {
    width: 24px;
    height: 24px;
  }
  &--lg svg {
    width: 40px;
    height: 40px;
  }
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
</style>
