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

const props = defineProps<{
  daysCompleted: number;
  avgParticipantsPresent: number;
}>();

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

<template>
  <BaseBox :details-link="'/statistic/attendance'" data-cy="dashboard.stats.attendance">
    <template #title>{{ $t("a.Anwesenheit") }}</template>
    <template #content>
      <div class="flex items-center">
        <i18next :translation="$t('a.NUMBER Präsenztage abgeschlossen')">
          <template #NUMBER>
            <span
              class="mr-3 text-4xl font-bold"
              data-cy="dashboard.stats.attendance.dayCompleted"
            >
              {{ daysCompleted }}
            </span>
          </template>
        </i18next>
      </div>
      <div class="flex items-center">
        <i18next :translation="$t('a.NUMBER Teilnehmer anwesend')">
          <template #NUMBER>
            <span
              class="mr-3 text-4xl font-bold"
              data-cy="dashboard.stats.attendance.participantsPresent"
            >
              {{ `${avgParticipantsPresent}%` }}
            </span>
          </template>
        </i18next>
      </div>
      <ItProgress :status-count="progressRecord"></ItProgress>
    </template>
  </BaseBox>
</template>
