<script setup>
import { Setting, SwitchButton } from "@element-plus/icons-vue";
import { useI18n } from "vue-i18n";
import { useRouter } from "vue-router";
import { useAuthStore } from "@/stores/auth";

const auth = useAuthStore();
const router = useRouter();
const { t } = useI18n();
const repoUrl = import.meta.env.VITE_REPO_URL;
const repoName = import.meta.env.VITE_REPO_NAME;

async function logout() {
  await auth.logout();
  await router.push("/");
}
</script>

<template>
  <header class="app-header">
    <router-link to="/" class="brand-link">
      <span class="brand-mark">EU</span>
      <span>
        <strong>Email Unlimit</strong>
        <small>{{ t("header.productLabel") }}</small>
      </span>
    </router-link>

    <nav class="nav-links" :aria-label="t('header.navigation')">
      <a
        v-if="repoUrl && repoName"
        :href="repoUrl"
        target="_blank"
        rel="noreferrer"
      >
        {{ repoName }}
      </a>
      <span v-if="auth.isAuthenticated" class="account-email">{{
        auth.email
      }}</span>
      <router-link
        to="/settings"
        class="icon-command"
        :title="t('header.settings')"
        :aria-label="t('header.settings')"
      >
        <el-icon><Setting /></el-icon>
      </router-link>
      <button
        v-if="auth.isAuthenticated"
        class="icon-command"
        type="button"
        :title="t('auth.logout')"
        :aria-label="t('auth.logout')"
        @click="logout"
      >
        <el-icon><SwitchButton /></el-icon>
      </button>
    </nav>
  </header>
</template>
