<script setup>
import { useSession } from 'src/composables/useSession';

const $props = defineProps({
    workerId: { type: Number, required: true },
    description: { type: String, default: null },
    size: { type: String, default: 'xl' },
});
const session = useSession();
const token = session.getToken();
</script>
<template>
    <div class="avatar-picture column items-center">
        <QAvatar color="orange" :size="$props.size">
            <QImg
                :src="`/api/Images/user/160x160/${$props.workerId}/download?access_token=${token}`"
                spinner-color="white"
            />
        </QAvatar>
        <div class="description">
            <slot name="description" v-if="$props.description">
                <p>
                    {{ $props.description }}
                </p>
            </slot>
        </div>
    </div>
</template>
