<script>
import { GlCard } from '@gitlab/ui';
import SeverityBadge from 'ee/vue_shared/security_reports/components/severity_badge.vue';

export default {
  components: {
    GlCard,
    SeverityBadge,
  },
  props: {
    severity: {
      type: String,
      required: true,
    },
    count: {
      type: Number,
      required: true,
    },
    isLoading: {
      type: Boolean,
      required: false,
      default: false,
    },
  },
};
</script>

<template>
  <gl-card
    class="gl-font-weight-bold"
    header-class="gl-display-flex gl-justify-content-center gl-p-3"
    body-class="gl-font-size-h2 gl-text-center"
  >
    <template #header>
      <severity-badge :severity="severity" />
    </template>
    <template #default>
      <span ref="body">
        <span v-if="isLoading">&mdash;</span> <span v-else>{{ count }}</span>
      </span>
    </template>
  </gl-card>
</template>
