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

const props = defineProps({
  courseType: {
    type: String,
    required: true,
  },
});
const user = useUserStore();
</script>

<template>
  <WizardPage :step="0">
    <template #content>
      <h2 class="my-10">{{ $t("a.Konto erstellen") }}</h2>
      <p class="mb-4">
        {{ $t("a.Damit du myVBV nutzen kannst, brauchst du ein Konto.") }}
      </p>
      <a
        :href="`/sso/signup?course=${props.courseType}&lang=${user.language}`"
        class="btn-primary"
      >
        {{ $t("a.Konto erstellen") }}
      </a>

      <p class="mb-4 mt-12">{{ $t("a.Hast du schon ein Konto?") }}</p>
      <a
        :href="
          getLoginURL({
            course: props.courseType,
            lang: user.language,
          })
        "
        class="btn-secondary"
      >
        {{ $t("a.Anmelden") }}
      </a>
    </template>
  </WizardPage>
</template>
