<script setup lang="ts">
const props = defineProps<{
  label: string
  value: number | null | undefined
}>()

function barColor(v: number): string {
  if (v >= 90) return 'error'
  if (v >= 70) return 'warning'
  return 'success'
}

function displayValue() {
  return props.value != null ? `${props.value}%` : '—'
}
</script>

<template>
  <div class="watch-metric-bar mb-1">
    <div class="d-flex justify-space-between text-caption mb-0">
      <span class="text-medium-emphasis">{{ label }}</span>
      <span class="font-weight-medium">{{ displayValue() }}</span>
    </div>
    <v-progress-linear
      :model-value="value ?? 0"
      :color="value != null ? barColor(value) : 'grey'"
      bg-opacity="0.2"
      height="6"
      rounded
    />
  </div>
</template>
