<script setup lang="ts">
import type { Ref } from "vue";
import { onMounted, ref } from "vue";
import { fetchMenteeCount } from "@/services/dashboard";
import BaseBox from "@/components/dashboard/BaseBox.vue";

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

const menteeCount: Ref<number> = ref(0);

onMounted(async () => {
  const data = await fetchMenteeCount(props.courseId);
  menteeCount.value = data?.mentee_count;
});
</script>

<template>
  <div class="w-[325px]">
    <BaseBox
      :details-link="`/dashboard/persons?course=${props.courseId}`"
      data-cy="dashboard.mentor.competenceSummary"
    >
      <template #title>{{ $t("a.Personen") }}</template>
      <template #content>
        <div class="flex flex-row space-x-3 bg-white pb-6">
          <div
            class="flex h-[74px] items-center justify-center py-1 pr-3 text-3xl font-bold"
          >
            <span>{{ menteeCount }}</span>
          </div>
          <p class="ml-3 mt-0 leading-[74px]">
            {{ $t("a.Personen, die du begleitest") }}
          </p>
        </div>
      </template>
    </BaseBox>
  </div>
</template>
