<template>
  <div class="favorites">
    <section class="page-hero">
      <div class="container">
        <h1>Избранное</h1>
      </div>
    </section>

    <section class="section">
      <div class="container">
        <div v-if="!isAuthenticated" class="favorites__guest">
          <p class="body-text--gray">Войдите, чтобы увидеть избранное</p>
          <NuxtLink to="/auth/login" class="btn btn--primary btn--md">
            Войти
          </NuxtLink>
        </div>

        <div v-else class="favorites__empty">
          <p class="body-text--gray">У вас пока нет избранных мест</p>
          <NuxtLink to="/search" class="btn btn--primary btn--md">
            Найти места
          </NuxtLink>
        </div>
      </div>
    </section>
  </div>
</template>

<script setup lang="ts">
definePageMeta({
  title: 'Избранное',
})

const { isAuthenticated } = useAuth()
</script>

<style scoped>
.page-hero {
  background: var(--color-primary);
  padding: 60px 0;
  text-align: center;
  color: var(--color-text-white);
}

.page-hero h1 {
  color: var(--color-text-white);
}

.favorites__guest,
.favorites__empty {
  text-align: center;
  padding: 60px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
</style>
