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

import BrandWordmark from '@/components/BrandWordmark.vue'
import { useAuthStore } from '@/stores/auth'

const authStore = useAuthStore()
const router = useRouter()

async function handleLogout(): Promise<void> {
  await authStore.logout()
  await router.push({ name: 'login' })
}
</script>

<template>
  <main class="dashboard-page">
    <header>
      <BrandWordmark theme="dark" />
      <button type="button" class="logout-button" @click="handleLogout">Log out</button>
    </header>

    <section>
      <p>Dashboard</p>
      <h1>Your next step starts here.</h1>
      <span>
        Your goals and today&apos;s assignments will appear here once account authentication is
        connected.
      </span>
    </section>
  </main>
</template>

<style scoped>
.dashboard-page {
  min-height: 100vh;
  min-height: 100svh;
  padding: 2rem clamp(1.5rem, 6vw, 5rem);
  color: #183029;
  background: #f4f1e7;
}

header {
  display: flex;
  width: min(100%, 76rem);
  align-items: center;
  justify-content: space-between;
  margin: 0 auto;
}

.logout-button {
  min-height: 2.75rem;
  padding: 0.7rem 1.1rem;
  border: 0;
  border-radius: 0.7rem;
  color: #fffdf7;
  background: #183a31;
  box-shadow: 0 0.55rem 1.2rem rgb(24 58 49 / 14%);
  font-size: 0.82rem;
  font-weight: 750;
  cursor: pointer;
  transition:
    background-color 160ms ease,
    transform 160ms ease,
    box-shadow 160ms ease;
}

.logout-button:hover {
  background: #285c4e;
  box-shadow: 0 0.7rem 1.4rem rgb(24 58 49 / 18%);
  transform: translateY(-1px);
}

.logout-button:focus-visible {
  outline: 3px solid rgb(86 127 112 / 34%);
  outline-offset: 0.25rem;
}

section {
  width: min(100%, 42rem);
  margin: clamp(6rem, 18vh, 12rem) auto 0;
  text-align: center;
}

section p {
  margin: 0 0 1rem;
  color: #926044;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

h1 {
  margin: 0;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(3rem, 7vw, 5rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.055em;
}

section span {
  display: block;
  max-width: 34rem;
  margin: 1.5rem auto 0;
  color: #68776f;
  line-height: 1.7;
}
</style>
