<script setup lang="ts">
    import { useAuthStore } from 'src/stores/auth-store';
    import { ref } from 'vue';
    
    const authStore = useAuthStore();
    const currentUser = authStore.user;

    // Will need to implement this eventually, just testing the look for now
    const notifAmount = ref(7);
</script>

<template>
    <q-item clickable v-ripple dark class="q-pa-none">
        <q-item-section :side="$q.screen.gt.sm">
            <q-avatar rounded >
                <q-img src="src/assets/targo-default-avatar.png" />
                <q-badge floating color="negative" v-if="notifAmount > 0" >{{ notifAmount }}</q-badge>
            </q-avatar>
        </q-item-section>

        <q-item-section v-if="$q.screen.gt.sm">
            <q-item-label>{{ currentUser.firstName }}  {{ currentUser.lastName }}</q-item-label>
            <q-item-label caption>{{ notifAmount }} new messages</q-item-label>
        </q-item-section>
    </q-item>
</template>