<script lang="ts">
    export let value: number = 0; // 0 to 100
    export let skillColour: string = 'bg-orange-400'; // Default color
</script>

<div class="w-full mt-3">
    <div class="flex justify-between mb-1">
        <span class="text-sm font-medium">Competency Level</span>
        <span class="text-sm font-medium">{value}%</span>
    </div>
    <div class="w-full bg-gray-800 rounded-full h-5">
        <div
            class="{skillColour} h-5 rounded-full transition-all duration-500"
            style="width: {value}%"
        ></div>
    </div>
</div>