<script>
import SeverityBadge from 'ee/vue_shared/security_reports/components/severity_badge.vue';

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

<template>
  <div class="rounded font-weight-bold border">
    <div class="p-2 bg-gray-light d-flex justify-content-center">
      <severity-badge :severity="severity" />
    </div>
    <div ref="body" class="pt-3 pb-3 gl-font-size-h2 text-center">
      <span v-if="isLoading">&mdash;</span> <span v-else>{{ count }}</span>
    </div>
  </div>
</template>
