<script setup lang="ts">
import LearningContentParent from "@/pages/learningPath/learningContentPage/LearningContentParent.vue";
import * as log from "loglevel";
import { computed } from "vue";
import { useCourseDataWithCompletion } from "@/composables";
import { stringifyParse } from "@/utils/utils";

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

log.debug("LearningContentView created", stringifyParse(props));

const courseData = useCourseDataWithCompletion(props.courseSlug);
const learningContent = computed(() =>
  courseData.findLearningContent(props.contentSlug, props.circleSlug)
);
const circle = computed(() => {
  return courseData.findCircle(props.circleSlug);
});
</script>

<template>
  <LearningContentParent
    v-if="learningContent && circle"
    :learning-content="learningContent"
    :circle="circle"
  />
</template>

<style lang="postcss" scoped></style>
