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

const props = defineProps<{
  detailsLink: string;
  totalAssignments: number;
  achievedPointsCount: number;
  maxPointsCount: number;
}>();

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

<template>
  <BaseBox :details-link="detailsLink">
    <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">{{ totalAssignments }}</span>
          </template>
        </i18next>
      </div>
      <div class="flex items-center">
        <i18next :translation="$t('a.xOfY Punkten erreicht')">
          <template #xOfY>
            <span class="mr-3 text-4xl font-bold">
              {{
                $t("a.VALUE von MAXIMUM", {
                  VALUE: props.achievedPointsCount,
                  MAXIMUM: props.maxPointsCount,
                })
              }}
            </span>
          </template>
        </i18next>
      </div>
      <ItProgress :status-count="progress"></ItProgress>
    </template>
  </BaseBox>
</template>
