<template>
  <section class="th-page unauthorized-view">
    <div class="th-section unauthorized-card">
      <i
        class="pi pi-lock"
        aria-hidden="true"
      />
      <h1>{{ t('auth.unauthorizedTitle') }}</h1>
      <p>{{ t('auth.unauthorizedMessage') }}</p>
      <RouterLink
        class="primary-link"
        :to="authStore.firstMenuPath ?? '/reservation/orders'"
      >
        {{ t('auth.backHome') }}
      </RouterLink>
    </div>
  </section>
</template>

<script setup lang="ts">
import { RouterLink } from 'vue-router'
import { useI18n } from 'vue-i18n'

import { useAuthStore } from '@/stores/authStore'

const { t } = useI18n()
const authStore = useAuthStore()
</script>

<style scoped>
.unauthorized-view {
  max-width: 760px;
}

.unauthorized-card {
  min-height: 260px;
  display: grid;
  justify-items: start;
  align-content: center;
  gap: 12px;
  padding: 28px;
}

.unauthorized-card i {
  color: var(--th-color-blue-600);
  font-size: 28px;
}

.unauthorized-card h1,
.unauthorized-card p {
  margin: 0;
}

.unauthorized-card h1 {
  color: var(--th-color-slate-900);
  font-size: 22px;
}

.unauthorized-card p {
  color: var(--th-color-slate-500);
  line-height: 1.6;
}

.primary-link {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  border-radius: var(--th-radius-sm);
  background: var(--th-color-blue-600);
  color: var(--th-color-white);
  font-weight: 800;
  padding: 0 14px;
}
</style>
