<script setup lang="ts">
import BaseBox from "@/components/dashboard/BaseBox.vue";
import ItProgress from "@/components/ui/ItProgress.vue";
import { computed } from "vue";

const props = defineProps<{
  assignmentsCompleted: number;
  avgPassed: number;
  courseSlug: string;
  detailsLink?: string;
}>();

const progress = computed(() => {
  return {
    SUCCESS: props.avgPassed,
    FAIL: 100 - props.avgPassed,
    UNKNOWN: 0,
  };
});
</script>

<template>
  <BaseBox
    :details-link="props.detailsLink || `/statistic/${courseSlug}/assignment`"
    data-cy="dashboard.stats.assignments"
  >
    <template #title>{{ $t("a.Kompetenznachweis-Elemente") }}</template>
    <template #content>
      <div class="flex items-center">
        <i18next :translation="$t('a.NUMBER Elemente abgeschlossen')">
          <template #NUMBER>
            <span
              class="mr-3 text-4xl font-bold"
              data-cy="dashboard.stats.assignments.completed"
            >
              {{ assignmentsCompleted }}
            </span>
          </template>
        </i18next>
      </div>
      <div class="flex items-center">
        <i18next :translation="$t('a.{NUMBER} Bestanden')">
          <template #NUMBER>
            <span
              class="mr-3 text-4xl font-bold"
              data-cy="dashboard.stats.assignments.passed"
            >
              {{ `${Math.round(props.avgPassed)}%` }}
            </span>
          </template>
        </i18next>
      </div>
      <ItProgress :status-count="progress"></ItProgress>
    </template>
  </BaseBox>
</template>
