<script setup lang="ts">
import BaseBox from "@/components/dashboard/BaseBox.vue";

defineProps<{
  failCount: number;
  successCount: number;
  detailsLink: string;
}>();
</script>

<template>
  <BaseBox :details-link="detailsLink" data-cy="dashboard.stats.competence">
    <template #title>{{ $t("a.Selbsteinschätzungen") }}</template>
    <template #content>
      <div class="flex items-center">
        <it-icon-smiley-happy class="mr-4 h-12 w-12"></it-icon-smiley-happy>
        <i18next :translation="$t('a.{NUMBER} Das kann ich')">
          <template #NUMBER>
            <span
              class="mr-3 text-4xl font-bold"
              data-cy="dashboard.stats.competence.success"
            >
              {{ successCount }}
            </span>
          </template>
        </i18next>
      </div>
      <div class="flex items-center">
        <it-icon-smiley-thinking class="mr-4 h-12 w-12"></it-icon-smiley-thinking>
        <i18next :translation="$t('a.{NUMBER} Das will ich nochmals anschauen')">
          <template #NUMBER>
            <span
              class="mr-3 text-4xl font-bold"
              data-cy="dashboard.stats.competence.fail"
            >
              {{ failCount }}
            </span>
          </template>
        </i18next>
      </div>
    </template>
  </BaseBox>
</template>
