<template>
  <div :class="circleClass">
    <slot />
  </div>
</template>

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

const sizeMap: Record<string, string> = {
  md: 'w-16 h-16 text-2xl',
  lg: 'w-20 h-20 text-3xl',
}

const toneMap: Record<string, string> = {
  primary: 'bg-primary/10 text-primary',
  neutral: 'bg-base-200 text-base-content',
}

const circleClass = computed(() => {
  const sizeClass = sizeMap[props.size] || sizeMap.md
  const toneClass = toneMap[props.tone] || toneMap.primary
  return ['rounded-full flex items-center justify-center', sizeClass, toneClass].join(' ')
})
</script>
