<script setup lang="ts">
import { useLearningPathStore } from "@/stores/learningPath";
import * as log from "loglevel";

import LearningPathDiagram from "@/components/learningPath/LearningPathDiagram.vue";
import type { LearningPath } from "@/services/learningPath";
import { ref } from "vue";

log.debug("LearningPathDiagramSmall created");

const props = defineProps<{
  courseSlug: string;
}>();

const learningPathData = ref<LearningPath | undefined>(undefined);

const learningPathStore = useLearningPathStore();

learningPathStore
  .loadLearningPath(props.courseSlug + "-lp", undefined, false, false)
  .then((data) => {
    learningPathData.value = data;
  });
</script>
<template>
  <LearningPathDiagram
    v-if="learningPathData"
    :learning-path="learningPathData"
    diagram-type="horizontalSmall"
  ></LearningPathDiagram>
</template>

<style scoped></style>
