<template>
  <q-card class="col-auto">
    <div class="row q-col-gutter-xs">
      <div v-for="opt in props.amounts" :key="opt.name">
        <q-card class="q-ma-xs" flat bordered>
          <q-item dense>
            <q-item-section>
              <q-item-label class="text-bold text-primary text-center">
                {{ $t(opt.name) }}
              </q-item-label>
            </q-item-section>
          </q-item>

          <q-separator />

          <q-card-section>
            <div class="column justify-between items-center q-mb-xs">
              <span class="text-bold text-grey-7 text-caption">{{ $t('events') }}</span>
              <q-badge color="black" outline class="text-bold">{{ opt.events }}</q-badge>
            </div>

            <div class="column justify-between items-center q-mb-xs">
              <span class="text-bold text-grey-7 text-caption">{{ $t('minimal') }}</span>
              <q-badge color="secondary" outline class="text-bold">{{ opt.minimal }}</q-badge>
            </div>

            <div class="column justify-between items-center q-mb-xs">
              <span class="text-bold text-grey-7 text-caption">{{ $t('average') }}</span>
              <q-badge color="secondary" outline class="text-bold">{{ opt.average }}</q-badge>
            </div>

            <div class="column justify-between items-center q-mb-xs">
              <span class="text-bold text-grey-7 text-caption">{{ $t('maximal') }}</span>
              <q-badge color="primary" outline class="text-bold">{{ opt.maximal }}</q-badge>
            </div>
          </q-card-section>
        </q-card>
      </div>
    </div>
  </q-card>
</template>

<script setup lang="ts">
import type { Amount } from 'src/vueLib/models/report';
import type { PropType } from 'vue';

const props = defineProps({
  amounts: {
    type: Array as PropType<Amount[]>,
    required: true,
  },
});
</script>
