<template>
  <div class="column items-center full-width">
    <q-img
      :src="Logo"
      style="max-width: 379px; max-height: 106px; height: 100%; width: 100%"
    />
    <div class="text-h4 text-weight-regular q-mt-lg text-primary">
      Verifique seu e-mail
    </div>

    <div
      class="items-center full-width q-px-lg q-mt-xl"
      style="display: flex; gap: 12px"
    >
      <div class="bg-primary" style="height: 1px; flex: 1"></div>
      <q-icon name="mdi-chevron-down" size="lg" color="warning" />
      <div class="bg-primary" style="height: 1px; flex: 1"></div>
    </div>

    <div
      class="text-body2 text-center text-primary q-px-lg"
      style="font-weight: 400"
    >
      Enviamos um e-mail com um link para redefinir sua senha<br />
      Por favor confira sua caixa de entrada e clique no link para prosseguir
    </div>

    <div class="text-body1 text-weight-medium text-primary q-mt-md">
      {{ email }}
    </div>

    <div
      class="text-body2 text-center text-primary q-mt-sm q-px-lg"
      style="font-weight: 400"
    >
      Não achou o e-mail? Verifique a caixa de spam ou tente novamente
    </div>

    <div class="full-width q-px-lg q-mt-lg">
      <q-btn
        class="full-width"
        color="primary-2"
        size="md"
        padding="sm"
        :loading
        @click="emit('resend')"
      >
        <q-icon name="mdi-refresh" class="q-mr-sm" />
        Reenviar E-mail
        <template #loading>
          <q-spinner />
        </template>
      </q-btn>
    </div>
  </div>
</template>

<script setup>
import Logo from "src/assets/images/logo.svg";

defineProps({
  email: { type: String, required: true },
  loading: Boolean,
});

const emit = defineEmits(["resend"]);
</script>
