<template>
  <v-skeleton-loader v-if="loading" type="card" />
  <v-card v-else class="text-center">
    <v-card-text>
      <div class="text-h2">
        {{ tardinessCount }}
      </div>
      <div class="text-subtitle-2">
        {{ $tc("alsijil.personal_notes.tardiness_n", tardinessCount) }}
      </div>
      <div class="text-subtitle-2">
        <!-- TODO: Show average tardiness instead of sum like mock-up? -->
        {{ tardinessSum }}
      </div>
    </v-card-text>
  </v-card>
</template>

<script>
export default {
  name: "StatisticsTardinessCard",
  props: {
    tardinessSum: {
      type: Number,
      required: true,
    },
    tardinessCount: {
      type: Number,
      required: true,
    },
    loading: {
      type: Boolean,
      required: false,
      default: false,
    },
  },
};
</script>