<script setup>
import { computed, ref } from 'vue';
import { useI18n } from 'vue-i18n';
import { useSession } from 'src/composables/useSession';
import { useColor } from 'src/composables/useColor';

const $props = defineProps({
    workerId: { type: Number, required: true },
    description: { type: String, default: null },
    size: { type: String, default: null },
    title: { type: String, default: null },
});
const { getTokenMultimedia } = useSession();
const token = getTokenMultimedia();
const { t } = useI18n();

const title = computed(() => $props.title ?? t('globals.system'));
const showLetter = ref(false);
</script>
<template>
    <div class="avatar-picture column items-center">
        <QAvatar
            :style="{
                backgroundColor: useColor(title),
            }"
            :size="$props.size"
            :title="title"
        >
            <template v-if="showLetter">{{ title.charAt(0) }}</template>
            <QImg
                v-else
                :src="`/api/Images/user/160x160/${$props.workerId}/download?access_token=${token}`"
                spinner-color="white"
                @error="showLetter = true"
            />
        </QAvatar>
        <div class="description">
            <slot name="description" v-if="$props.description">
                <p>
                    {{ $props.description }}
                </p>
            </slot>
        </div>
    </div>
</template>
