<script setup lang="ts">
import WizardPage from "@/components/onboarding/WizardPage.vue";
import { useUserStore } from "@/stores/user";
import InfoBox from "@/components/onboarding/InfoBox.vue";

const userStore = useUserStore();
</script>

<template>
  <WizardPage :step="0.5">
    <template #content>
      <h2 class="my-10" data-cy="account-confirm-title">
        {{ $t("a.Konto erstellen") }}
      </h2>
      <InfoBox color="text-green-500" icon="it-icon-check">
        <template #content>
          <p class="text-lg font-bold">
            {{
              $t("a.Du hast erfolgreich ein Konto für EMAIL erstellt.", {
                email: userStore.email,
              })
            }}
          </p>
        </template>
      </InfoBox>
      <p class="text-lg font-bold">
        {{ $t("a.Mach nun weiter mit dem nächsten Schritt.") }}
      </p>
    </template>

    <template #footer>
      <router-link
        :to="{ name: 'accountProfile' }"
        class="btn-blue flex items-center"
        data-cy="continue-button"
      >
        {{ $t("general.next") }}
        <it-icon-arrow-right class="it-icon ml-2 h-6 w-6" />
      </router-link>
    </template>
  </WizardPage>
</template>
