<template>
  <div>
      <!-- breadcrumb start -->
      <breadcrumb-4 title="Registrarse ahora" subtitle="Registro" :center="true" v-if="!user_created"/>
      <!-- breadcrumb end -->

      <!-- register area start -->
      <register-area v-if="!user_created"/>
      <!-- register area end -->

      <div class="">
        <div class="col-12 col-sm-6 col-lg-4 mx-auto">
          <div v-if="user_created" class="card my-4 shadow pb-4">
            <div class="card-body d-flex justify-content-center flex-column align-items-center">
              <img src="/img/icons/success.webp" alt="cuenta-creada-correctamente" width="120"/>
              <h4 class="text-center">¡Cuenta creada correctamente!</h4>
              <p class="text-center mb-0">Tu cuenta ha sido creada. Te hemos enviado un email para activar tu cuenta.</p>

              <nuxt-link to="login" class="btn btn-primary w-100 mt-3" @click="user_created = false">Iniciar sesión</nuxt-link>
            </div>
          </div>
        </div>
      </div>
  </div>
</template>

<script setup lang="ts">
import { useRegisterStore } from '@/pinia/auth/register/register.store';
import { storeToRefs } from 'pinia';

useSeoMeta({ title: "VectorGeenk - Registro" });

const { user_created } = storeToRefs(useRegisterStore());

</script>
