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

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

const sizeMap: Record<string, string> = {
  sm: 'loading-sm',
  md: 'loading-md',
  lg: 'loading-lg',
}

const spinnerClass = computed(() => {
  const sizeClass = sizeMap[props.size] || sizeMap.md
  return ['loading loading-spinner', sizeClass].join(' ')
})
</script>
