<script setup>
import { computed } from 'vue';

const props = defineProps({
    value: { type: Number, default: 0 },
    max: { type: Number, default: 100 },
    color: { type: String, default: null },
    height: { type: Number, default: 6 },
    bg: { type: String, default: null },
    tok: { type: Object, required: true },
});

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

<template>
    <div :style="{ height: height + 'px', borderRadius: '999px', overflow: 'hidden', background: bg || tok.bgAlt }">
        <div :style="{ height: '100%', width: pct + '%', background: color || tok.primary, borderRadius: '999px', transition: 'width .3s ease' }" />
    </div>
</template>
