<template>
    <div :class="{'user-card': !mobile, 'mobile': mobile}">
        <Avatar :mobile="mobile" :avatar-url="user?.identity?.avatar" :user-id="user?.identity?.id" 
                :isMod="user?.identity?.isMod"
        :isOwner="user?.identity?.isOwner"
        :isAdmin="user?.identity?.isAdmin"/>
         <div class="user-info">
            <p class="global">{{ user?.identity?.global_name || 'Nom d\'affichage inconnu' }}</p>
            <p class="username">{{ user?.identity?.username || 'Identifiant inconnu' }}</p>
        </div>
    </div>
</template>
<script setup>
import Avatar from './Avatar.vue';
const props = defineProps({
    user: {
        type: Object,
        default: () => ({
            identity: {
                id: '261175887393718273',
                username: 'Identifiant inconnu',
                global_name: 'Nom d\'affichage inconnu',
                avatar: '96ecebdefe9fb9483b2e1b17a417ba32'
            }
        })
    },
    mobile: {
        type: Boolean,
        default: false
    }
}); 

</script>
<style scoped>
img {
    border-radius: 100%;
    width: 50px;
    height: 50px;
}

p {
    margin: 0;
}

.user-card {
    display: flex;
    align-items: center;
    gap: 10px;
    user-select: none;
}

.mobile {
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 8px;
    user-select: none;

}

.mobile .user-info {
    display: flex;
    justify-content: center;
    align-items: center;
}

.mobile .username {
    font-size: 1.2em !important;
}


.mobile .global {
    font-size: 1.6em !important;
}


.user-info {
    display: flex;
    gap: 5px    ;
    flex-direction: column;
}

.global {
    font-size: 15px;
}

.username {
    color: var(--text-secondary);
    font-size: 12px;

}
</style>