<script setup lang="ts">
import { useCurrentCourseSession } from "@/composables";
import MyMentors from "@/components/learningMentor/MyMentors.vue";
import MyMentees from "@/components/learningMentor/MyMentees.vue";
import { computed } from "vue";

const courseSession = useCurrentCourseSession();

const isMyMentorsVisible = computed(() =>
  courseSession.value.actions.includes("learning-mentor::edit-mentors")
);

const isMyMenteesVisible = computed(() =>
  courseSession.value.actions.includes("learning-mentor::guide-members")
);
</script>

<template>
  <div class="container-large space-y-20">
    <template v-if="isMyMenteesVisible || isMyMentorsVisible">
      <div v-if="isMyMentorsVisible">
        <MyMentors data-cy="lm-my-mentors" />
      </div>
      <div v-if="isMyMenteesVisible">
        <MyMentees data-cy="lm-my-mentees" />
      </div>
    </template>
  </div>
</template>
