<script setup lang="ts">
import CirclePage from "@/pages/learningPath/circlePage/CirclePage.vue";
import { useCockpitStore } from "@/stores/cockpit";
import * as log from "loglevel";
import { computed, onMounted } from "vue";

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

log.debug("CockpitUserCirclePage created", props.userId, props.circleSlug);

const cockpitStore = useCockpitStore();

onMounted(async () => {
  log.debug("CockpitUserCirclePage mounted");
});

const user = computed(() => {
  return cockpitStore.courseSessionUsers?.find(
    (csu) => csu.user_id === Number(props.userId)
  );
});
</script>

<template>
  <CirclePage
    v-if="user"
    :course-slug="props.courseSlug"
    :circle-slug="props.circleSlug"
    :profile-user="user"
    :readonly="true"
  ></CirclePage>
</template>

<style scoped></style>
