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

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

// types

type Props = {
    src: string | null | undefined;
    alt: string;
    iconClass?: 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 inset-shadow-black/20 inset-shadow-sm"
    >
        <Skeleton
            v-if="isLoading && !!src"
            class="w-full !h-[110%] !rounded-full aspect-square"
        />
        <template v-else>
            <AvatarImage
                v-if="!!src"
                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"
                        class="**:stroke-black text-lg"
                        :class="iconClass"
                    />
                </div>
            </AvatarFallback>
        </template>
    </AvatarRoot>
</template>
