<script>
import { SEVERITY_LEVELS } from '../store/constants';

export default {
  name: 'VulnerabilityCount',
  props: {
    severity: {
      type: String,
      required: true,
    },
    count: {
      type: Number,
      required: true,
    },
    isLoading: {
      type: Boolean,
      required: false,
      default: false,
    },
  },
  computed: {
    className() {
      return `vulnerability-count-${this.severity}`;
    },
    severityTitle() {
      return SEVERITY_LEVELS[this.severity] || this.severity;
    },
  },
};
</script>

<template>
  <div class="vulnerability-count" :class="className">
    <div class="vulnerability-count-header">{{ severityTitle }}</div>
    <div class="vulnerability-count-body">
      <span v-if="isLoading">&mdash;</span> <span v-else>{{ count }}</span>
    </div>
  </div>
</template>

<style>
.vulnerability-count {
  background-color: #fafafa;
  border-radius: 0.6em;
  color: #505050;
  display: block;
  font-weight: bold;
  margin-bottom: 1em;
  overflow: hidden;
  text-align: center;
}
.vulnerability-count-header {
  background-color: #f2f2f2;
  display: block;
  padding: 0.4em;
  text-transform: capitalize;
}
.vulnerability-count-body {
  display: block;
  font-size: 2em;
  padding: 0.8em;
}

.vulnerability-count-critical {
  background-color: #fff6f5;
  color: #c0341e;
}
.vulnerability-count-critical .vulnerability-count-header {
  background-color: #fae5e1;
}

.vulnerability-count-high {
  background-color: #fffaf3;
  color: #de7e00;
}
.vulnerability-count-high .vulnerability-count-header {
  background-color: #fff1de;
}

.vulnerability-count-medium {
  background-color: #f9f7fd;
  color: #6d49cb;
}
.vulnerability-count-medium .vulnerability-count-header {
  background-color: #ede8fb;
}

.vulnerability-count-unknown {
  background-color: #ffffff;
  border: 1px solid;
  color: #707070;
}
.vulnerability-count-unknown .vulnerability-count-header {
  background-color: #ffffff;
  border-bottom: 1px solid;
}
</style>
