<script setup lang="ts">
import LearningPathCircleListTile from "@/pages/learningPath/learningPathPage/LearningPathCircleListTile.vue";
import { computed } from "vue";
import type { LearningContentWithCompletion, LearningPathType } from "@/types";

const props = defineProps<{
  learningPath: LearningPathType | undefined;
  nextLearningContent: LearningContentWithCompletion | undefined;
}>();

const topics = computed(() => props.learningPath?.topics ?? []);
</script>

<template>
  <div v-for="topic in topics" :key="topic.title">
    <div class="pb-2 font-bold text-gray-700">
      {{ topic.title }}
    </div>
    <LearningPathCircleListTile
      v-for="circle in topic.circles"
      :key="circle.id"
      :circle="circle"
      :next-learning-content="props.nextLearningContent"
    ></LearningPathCircleListTile>
  </div>
</template>
