<script setup lang="ts">
import { onMounted, ref, Ref } from "vue";
import { fetchMentorCompetenceSummary } from "@/services/dashboard";
import { AssignmentsStatisticsType } from "@/gql/graphql";

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

const summary: Ref<AssignmentsStatisticsType | null> = ref(null);

onMounted(async () => {
  summary.value = await fetchMentorCompetenceSummary(props.courseId);
  console.log(summary.value);
});
</script>

<template>
  <div v-if="summary" class="w-[325px]">
    <div class="flex flex-row space-x-3 bg-white">
      <div
        class="flex h-[74px] items-center justify-center px-3 py-1 text-3xl font-bold"
      >
        <span>{{ summary.summary.total_passed }}</span>
      </div>
      <p class="ml-3 mt-0 leading-[74px]">{{ $t("Bestanden") }}</p>
    </div>
    <div class="flex flex-row space-x-3 bg-white pb-6">
      <div
        class="flex h-[74px] items-center justify-center px-3 py-1 text-3xl font-bold"
      >
        <span>{{ summary.summary.total_failed }}</span>
      </div>
      <p class="ml-3 mt-0 leading-[74px]">{{ $t("Nicht bestanden") }}</p>
    </div>
    <p>{{ $t("Details anschauen") }}</p>
  </div>
</template>
