<template>
  <span v-if="isCounterAvailable" class="badge rounded-pill bg-danger mx-2">
    {{ count }}
  </span>
</template>

<script lang="ts" setup>
import { computed } from "vue";

const props = defineProps<{
  count: number;
}>();

const isCounterAvailable = computed(
  () => typeof props.count !== "undefined" && props.count > 0,
);
</script>
