<script setup lang="ts">
import type { HTMLAttributes } from 'vue';
import { computed } from 'vue';
import { AvatarRoot } from 'reka-ui';
import { cn } from '@/lib/utils';

type AvatarSize = 5 | 6 | 8 | 10 | 12 | '5' | '6' | '8' | '10' | '12';

const props = defineProps<{
  class?: HTMLAttributes['class'];
  size?: AvatarSize;
}>();

const avatarSizeClass = computed(
  () =>
    ({
      5: 'size-5',
      6: 'size-6',
      8: 'size-8',
      10: 'size-10',
      12: 'size-12',
    })[String(props.size ?? 8)],
);
</script>

<template>
  <AvatarRoot
    data-slot="avatar"
    :class="
      cn(
        'relative flex shrink-0 overflow-hidden rounded-full',
        avatarSizeClass,
        props.class,
      )
    "
  >
    <slot />
  </AvatarRoot>
</template>
