<script setup lang="ts">
import {useRouter} from "vue-router";
import {useAuthStore} from "@/stores/auth.store.ts";
const router = useRouter();
const auth = useAuthStore();
const userInfo = auth.userData;
if (!userInfo) {
  router.push('/login');
}
const userName = auth.userData.login;

const logout = () => {
  auth.logout();
  router.push('/');
}

</script>

<template>
  <v-sheet
      :width="150"
  >
    <v-btn color="info">{{ userName }} {{ $t('header.userinfo.info') }}</v-btn>
    <v-btn color="" @click="logout">{{ $t('header.userinfo.logout') }}</v-btn>
  </v-sheet>
</template>

<style scoped>
  div button {
    width: 100%;
  }
  div button:not(:first-child) {
    margin-top: 2px;
  }
</style>