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

const props = defineProps<{
  value: number
  /** Couleur de la barre (défaut noir-donut). Accepte n'importe quel CSS color. */
  color?: string
  /** Affiche `XX%` à droite. */
  showLabel?: boolean
}>()

const safe = computed(() => Math.max(0, Math.min(100, props.value)))
</script>

<template>
  <div class="flex items-center gap-3">
    <div class="h-1.5 flex-1 bg-gray-100 rounded-full overflow-hidden">
      <div
        class="h-full rounded-full transition-all duration-300"
        :style="{ width: `${safe}%`, background: color ?? '#111827' }"
      />
    </div>
    <span v-if="showLabel" class="text-xs font-medium text-donut-muted tabular-nums">
      {{ safe }}%
    </span>
  </div>
</template>
