<script>
export default {
  name: 'VulnerabilityChartLabel',
  props: {
    name: {
      type: String,
      required: true,
    },
    color: {
      type: String,
      required: true,
    },
    value: {
      type: [Number],
      required: false,
      default: null,
    },
  },
};
</script>

<template>
  <div class="d-flex align-items-center mb-1 js-chart-label">
    <div class="js-color" :style="{ backgroundColor: color, width: '12px', height: '4px' }"></div>
    <strong class="ml-2 mr-3 text-capitalize js-name">{{ name }}</strong>
    <span v-if="value !== null" class="ml-auto js-value">{{ value }}</span>
  </div>
</template>
