<template>
  <div :class="spinnerClass" />
</template>

<script setup lang="ts">
const props = defineProps({
  size: {
    type: String,
    default: 'md', // sm | md
  },
})

const sizeMap: Record<string, string> = {
  sm: 'h-6 w-6',
  md: 'h-10 w-10',
}

const spinnerClass = computed(() => {
  const sizeClass = sizeMap[props.size] || sizeMap.md
  return ['inline-block', sizeClass, 'rounded-full', 'border-b-2', 'border-primary', 'animate-spin'].join(' ')
})
</script>
