<script setup lang="ts">
import LearningPathCircleListTile from "@/pages/learningPath/learningPathPage/LearningPathCircleListTile.vue";
import type { Circle } from "@/services/circle";
import type { LearningPath } from "@/services/learningPath";
import { computed } from "vue";

const props = defineProps<{
  learningPath: LearningPath | undefined;
}>();

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

const isCurrentCircle = (circle: Circle) =>
  props.learningPath?.nextLearningContent?.parentCircle === circle;
</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"
      :learning-path="learningPath"
      :circle="circle"
      :is-current-circle="isCurrentCircle(circle)"
    ></LearningPathCircleListTile>
  </div>
</template>
