<script setup lang="ts">
import { useUserStore } from "~/stores";
import logo from "~/assets/logo.png";

const userStore = useUserStore();
const { isOnline } = storeToRefs(userStore);
</script>

<template>
  <div class="w-full h-16 flex items-center justify-between border-b px-4">
    <img
      :src="logo"
      alt="AI Art Studio logo"
      class="h-8 select-none"
      :class="{
        'cursor-pointer': $route.path !== '/'
      }"
      @click="$router.push('/')"
    />
    <div v-if="!$route.path.includes('login')">
      <el-button v-if="isOnline" @click="userStore.logout()">退出</el-button>
      <el-button v-else @click="$router.push('/login')">登录</el-button>
    </div>
  </div>
</template>
