<script setup>
import { useRouter } from "vue-router";
import { GnButton, GnStatusCard } from "gnexus-ui-kit/vue";
import { clearToken } from "../api.js";
import { t } from "../i18n/index.js";

const router = useRouter();

function backToLogin() {
  clearToken();
  router.push("/login");
}
</script>

<template>
  <div class="denied-page">
    <GnStatusCard
      variant="error"
      icon="ph-shield-warning"
      :title="t('denied.cardTitle')"
      :text="t('denied.cardText')"
    />
    <GnButton variant="secondary" icon="ph-arrow-left" @click="backToLogin">{{ t("denied.backToLogin") }}</GnButton>
  </div>
</template>

<style scoped>
.denied-page {
  min-height: 100vh;
  display: grid;
  place-content: center;
  gap: var(--gn-space-4);
  padding: var(--gn-space-4);
  max-width: 460px;
  margin-inline: auto;
}
</style>