<template>
  <div class="profile-guest">
    <UiIcon
      class="profile-guest__icon"
      name="user-circle-single"
      size="64"
    />
    <h1 class="profile-guest__title">{{ $t('profile.guest_please') }}</h1>
    <p class="profile-guest__description">{{ $t('profile.to_access_this_page') }}
      <br>
      {{ $t('profile.click_the_button') }}
    </p>
    <div class="profile-guest__buttons">
      <UiBtn
        theme="primary"
        @click="useAuthPopup().openAuthPopup(AuthSteps.Registration)"
      >{{ $t('auth.sign_up') }}
      </UiBtn>
      <UiBtn
        theme="secondary"
        @click="useAuthPopup().openAuthPopup(AuthSteps.Login)"
      >{{ $t('auth.log_in') }}
      </UiBtn>
    </div>
  </div>
</template>

<script setup lang="ts">
import { AuthSteps } from '../../runtime';
</script>

<style lang="scss">
.profile-guest {
  display: grid;
  row-gap: 8px;
  place-content: center;
  place-items: center;

  @include from-br(sm) {
    row-gap: 16px;
  }
}

.profile-guest__icon {
  opacity: 0.05;
}

.profile-guest__buttons {
  display: flex;
  gap: 8px;
}

.profile-guest__title {
  @include font-xl;

  font-weight: 700;
  text-transform: uppercase;
  text-align: center;
}

.profile-guest__description {
  @include font-sm;

  font-weight: 400;
  color: $profile-guest-description;
  text-align: center;
}
</style>
