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

const props = defineProps<{
  feedbackCount: number;
  statisfactionMax: number;
  statisfactionAvg: number;
}>();

const satisfactionColor = computed(() => {
  return getBlendedColorForRating(props.statisfactionAvg);
});
</script>

<template>
  <BaseBox :details-link="'/statistic/feedback'" data-cy="dashboard.stats.feedback">
    <template #title>{{ $t("a.Feedback Teilnehmer") }}</template>
    <template #content>
      <div class="flex items-center">
        <!-- Left Pane -->
        <div
          class="mr-3 flex items-center justify-center rounded p-4"
          :style="{ backgroundColor: satisfactionColor }"
        >
          <i18next :translation="$t('a.{AVG} von {MAX}')">
            <template #AVG>
              <span
                class="pr-2 text-4xl font-bold"
                data-cy="dashboard.stats.feedback.average"
              >
                {{ props.statisfactionAvg.toFixed(1) }}
              </span>
            </template>
            <template #MAX>
              <span class="pl-1 text-sm">{{ props.statisfactionMax }}</span>
            </template>
          </i18next>
        </div>
        <!-- Right Pane -->
        <div class="flex flex-col items-center space-y-1">
          <span class="font-bold">{{ $t("a.Allgemeine Zufriedenheit") }}</span>
          <div class="self-start">
            <i18next :translation="$t('a.Total {NUMBER} Antworten')">
              <template #NUMBER>
                <span class="font-bold" data-cy="dashboard.stats.feedback.count">
                  {{ props.feedbackCount }}
                </span>
              </template>
            </i18next>
          </div>
        </div>
      </div>
    </template>
  </BaseBox>
</template>
