<script setup>
/**
 * RqScoreBar.vue — Barre de score pondéré
 *
 * @prop value   Number — score actuel
 * @prop max     Number — score maximum (défaut 20)
 * @prop showLabel Boolean — affiche "X/max" à droite
 */
import { computed } from 'vue';

const props = defineProps({
    value:     { type: Number, required: true },
    max:       { type: Number, default: 20 },
    showLabel: { type: Boolean, default: true },
});

const pct = computed(() => Math.min(100, (props.value / props.max) * 100));

const colorClass = computed(() => {
    if (pct.value >= 80) return 'bg-success';
    if (pct.value >= 60) return 'bg-highlight';
    return 'bg-accent';
});
</script>

<template>
    <div class="flex items-center gap-2.5 w-full">
        <div class="flex-1 h-[5px] bg-ink/[0.07] rounded-full overflow-hidden">
            <div
                :class="['h-full rounded-full transition-all duration-500', colorClass]"
                :style="{ width: `${pct}%` }"
            />
        </div>
        <span v-if="showLabel" class="text-xs font-black text-ink tabular-nums min-w-[44px] text-right">
            {{ value }}<span class="text-[9px] text-ink/40 font-semibold">/{{ max }}</span>
        </span>
    </div>
</template>
