<script setup lang="ts">
import WizardSidePanel from "@/components/onboarding/WizardSidePanel.vue";
import { computed } from "vue";
import mood_uk from "@/assets/images/mood_uk.jpg";
import mood_vv from "@/assets/images/mood_vv.jpg";
import { useTranslation } from "i18next-vue";
import { startsWith } from "lodash";
import { getVVCourseName } from "@/pages/onboarding/vv/composables";

const props = defineProps({
  courseType: {
    type: String,
    required: true,
  },
});

const { t } = useTranslation();

const courseData = computed(() => {
  if (props.courseType === "uk") {
    return {
      name: t("a.Überbetriebliche Kurse"),
      imageUrl: mood_uk,
    };
  }
  if (startsWith(props.courseType, "vv")) {
    return {
      name: getVVCourseName(props.courseType),
      imageUrl: mood_vv,
    };
  } else {
    return {
      name: "",
      imageUrl: "",
    };
  }
});
</script>

<template>
  <div class="flex flex-col lg:flex-row">
    <WizardSidePanel
      class="lg:w-1/3"
      :image-url="courseData.imageUrl"
      :course-name="courseData.name"
    />
    <router-view class="lg:w-2/3" />
  </div>
</template>
