<template>
  <div class="email-confirmation">
    <img src="/email-confirmation.svg" alt="logo" draggable="false">

    <h1 class="email-confirmation__title">
      {{ $t('check_email') }}
    </h1>

    <div class="email-confirmation__content">
      <i18n-t
        scope="global"
        keypath="we_have_sent_you_an_email_to"
        tag="p"
        class="email-confirmation__text"
      >
        <strong class="email-confirmation__email">{{ email }}</strong>
      </i18n-t>

      <div class="email-confirmation__instructions">
        <slot />
      </div>
    </div>

    <div class="email-confirmation__upper-text">
      <i18n-t class="mb-18" keypath="check_spam_folder" tag="p" scope="global">
        <strong class="text-grey-600">«{{ $t('spam') }}»</strong>
      </i18n-t>
    </div>

    <div v-if="resendFn" class="email-confirmation__resend">
      <span>{{ $t('did_not_get_mail') }}</span>

      <UiButton class="ml-4" type="link" @click="resendFn">
        {{ $t('send_again') }}
      </UiButton>
    </div>
  </div>
</template>

<script setup lang="ts">
defineProps({
  email: {
    required: true,
    type: String,
  },
  resendFn: { type: Function },
})
</script>

<style lang="scss">
.email-confirmation {
  width: 516px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 0 auto;

  &__title {
    margin-bottom: 30px;
  }

  &__content {
    background-color: $clr-grey-200;
    padding: 24px;
    border-radius: 12px;
  }

  &__text {
    @include txt-l;
    display: inline-block;
    text-align: center;
    margin-bottom: 20px;
    width: 100%;
  }

  &__instructions {
    @include txt-l-sb;
    display: inline-block;
    text-align: center;
    width: 100%;
  }

  &__email {
    color: $clr-grey-500;
  }

  &__upper-text {
    @include txt-m;
    display: inline-block;
    text-align: center;
    margin-top: 40px;

    color: $clr-grey-500;
  }

  &__resend {
    @include txt-i-m;

    color: $clr-grey-600;
  }

  &__under-text {
    @include txt-i-m;
  }
}
</style>
