<script setup lang="ts">
import type { CompetenceCertificate } from "@/types";
import { useTranslation } from "i18next-vue";
import { computed } from "vue";
import { assignmentsUserPoints, calcCompetenceCertificateGrade } from "./utils";

export interface Props {
  detailView: boolean;
  competenceCertificate: CompetenceCertificate;
  compactView?: boolean;
  label?: string;
}

const props = withDefaults(defineProps<Props>(), {
  compactView: false,
});

const userGrade = computed(() => {
  return calcCompetenceCertificateGrade(props.competenceCertificate.assignments, true);
});
const userPointsEvaluatedAssignments = computed(() => {
  return assignmentsUserPoints(props.competenceCertificate.assignments);
});
</script>

<template>
  <section v-if="userPointsEvaluatedAssignments > 0">
    <div class="flex items-center">
      <div
        class="py-4"
        :class="detailView ? 'heading-1' : compactView ? 'heading-3' : 'heading-2'"
        :data-cy="`certificate-${competenceCertificate.slug}-grade`"
      >
        {{ label ?? $t("a.Note") }}: {{ userGrade }}
      </div>
    </div>
  </section>
  <section v-else class="py-2">
    {{ $t("a.competenceCertificateNoUserPoints") }}
  </section>
</template>
