<script setup lang="ts">
// imports

import { useImage } from "@vueuse/core";

// types

type Props = {
    src: string;
    alt: string;
};

// props

const props = defineProps<Props>();

const { src } = toRefs(props);

// state

const { isLoading } = useImage({ src: src.value });
</script>

<template>
    <AvatarRoot
        class="flex-center size-full select-none rounded-full align-middle overflow-hidden"
    >
        <Skeleton
            v-if="isLoading"
            class="w-full !h-[110%] !rounded-full aspect-square"
        />
        <template v-else>
            <AvatarImage
                class="!size-full rounded-full object-cover"
                :src="src"
                :alt="alt"
            />
            <AvatarFallback
                class="flex-center size-full text-sm font-medium rounded-full"
                :delay-ms="600"
            >
                <div class="size-full rounded-full flex-center">
                    <Icon name="ci:profile" size="16" class="**:stroke-black" />
                </div>
            </AvatarFallback>
        </template>
    </AvatarRoot>
</template>
