<script setup lang="ts">
import LoadingSpinner from "@/components/ui/LoadingSpinner.vue";
import { useCourseStatisticsv2 } from "@/composables";

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

const { courseStatistics, loading, courseSessionName, circleMeta } =
  useCourseStatisticsv2(props.courseSlug);
</script>

<template>
  <div class="bg-gray-200">
    <div v-if="loading" class="m-8 flex justify-center">
      <LoadingSpinner />
    </div>
    <div v-else class="container-large flex flex-col space-y-8">
      <router-link class="btn-text inline-flex items-center pl-0" to="/">
        <it-icon-arrow-left />
        <span>{{ $t("general.back") }}</span>
      </router-link>
      <router-view
        :course-statistics="courseStatistics"
        :course-session-name="courseSessionName"
        :circle-meta="circleMeta"
      ></router-view>
    </div>
  </div>
</template>
