<template>
    <div class="header" v-if="userStore.isLoggedIn" @click="goToUserPage()">
        <div class="header__user-image">
            <div class="header__image-container">
                <img class="header__image" :src="userStore.userData.image" v-if="userStore.userData.image" />
                <FontAwesomeIcon class="header__image-placeholder" icon="user" v-else />
            </div>
        </div>
        <div class="header__name">{{ userStore.userData.name }} {{ userStore.userData.surname }}</div>
        <div class="header__coins">
            <FontAwesomeIcon icon="coins" />
            {{ userStore.laCoins }}
        </div>
    </div>
</template>

<script setup lang="ts">
import { useUserStore } from "@/store";
import { useRouter } from "vue-router";

const userStore = useUserStore();
const router = useRouter();

function goToUserPage() {
    router.push("/user");
}
</script>

<style lang="scss">
.header {
    display: flex;
    align-items: center;
    height: r(60);
    padding: r(5) r(20);
    color: color("ui-color-on-background");
    background: linear-gradient(60deg, color("theme-color"), color("theme-color", $lightness: -13%));
    box-shadow: 0 r(4) r(20) 0 hsla(0, 0%, 0%, 0.14), 0 r(7) r(12) r(-5) color("theme-color", $alpha: -0.54);
    user-select: none;
    z-index: 50;

    &__user-image {
        position: relative;
        width: r(60);
        z-index: 1;
    }

    &__image-container {
        display: flex;
        justify-content: center;
        align-items: center;
        width: r(50);
        height: r(50);
        border-radius: 50%;
        background: white;
    }

    &__image {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        object-fit: cover;
    }

    &__image-placeholder {
        width: 50%;
        height: 50%;
        color: color("theme-color");
    }

    &__name {
        flex: 1;
        line-height: r(21);
    }
}
</style>
