<template>
    <header>
        <nav>
            <router-link to="/">Главная</router-link> |

            <template v-if="!authStore.isAuthenticated">
                <router-link to="/login">Вход</router-link> |
                <router-link to="/register">Регистрация</router-link>
            </template>

            <template v-else>
                <router-link to="/account">Личный кабинет</router-link>
                <span>Привет, {{ authStore.user?.username }}!</span> |
                <a @click="authStore.handleLogout" href="#">Выход</a>
            </template>
        </nav>
    </header>
    <main>
        <router-view />
    </main>
</template>

<script setup lang="ts">
import { useAuthStore } from "@/stores/auth";
const authStore = useAuthStore();
</script>

<style scoped>
header {
    background-color: #f0f0f0;
    padding: 1rem;
    text-align: center;
}
nav a {
    margin: 0 1rem;
    text-decoration: none;
    color: #2c3e50;
}
nav a.router-link-exact-active {
    font-weight: bold;
    color: #42b983;
}
main {
    padding: 1rem;
}
span {
    margin: 0 1rem;
}
a {
    cursor: pointer;
}
</style>
