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

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

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

onMounted(async () => {
  const data = await fetchOpenTasksCount(props.courseId);
  openTaskCount.value = data?.open_task_count;
});
</script>

<template>
  <div class="w-[325px]">
    <BaseBox
      :details-link="`/course/${props.courseSlug}/learning-mentor/tasks`"
      data-cy="dashboard.mentor.openTasksCount"
    >
      <template #title>{{ $t("Zu erledigen") }}</template>
      <template #content>
        <div class="flex flex-row space-x-3 bg-white pb-6">
          <div
            class="flex h-[74px] w-[74px] items-center justify-center rounded-full border-2 border-green-500 px-3 py-1 text-3xl font-bold"
          >
            <span>{{ openTaskCount }}</span>
          </div>
          <p class="ml-3 mt-0 leading-[74px]">{{ $t("Elemente zu erledigen") }}</p>
        </div>
      </template>
    </BaseBox>
  </div>
</template>
