<script setup lang="ts">
defineProps<{
  participantCount: number;
  expertCount: number;
  sessionCount: number;
}>();
</script>

<template>
  <div class="flex items-center justify-between bg-white p-6">
    <div class="flex space-x-6">
      <div class="flex items-center space-x-2">
        <span class="text-4xl font-bold" data-cy="dashboard.stats.participant.count">
          {{ participantCount }}
        </span>
        <span>{{ $t("a.Teilnehmer") }}</span>
      </div>
      <div class="flex items-center space-x-2">
        <span class="text-4xl font-bold" data-cy="dashboard.stats.expert.count">
          {{ expertCount }}
        </span>
        <span>{{ $t("a.Trainer") }}</span>
      </div>
      <div class="flex items-center space-x-2">
        <span class="text-4xl font-bold" data-cy="dashboard.stats.session.count">
          {{ sessionCount }}
        </span>
        <span>{{ $t("a.Durchführungen") }}</span>
      </div>
    </div>
  </div>
</template>

<style scoped></style>
