@props(['value'])
@php
    $value = (int) $value;
    // $color = match ($value) {
    //     $value < 40 => 'bg-red-500',
    //     $value < 60 && $value >= 40 => 'bg-yellow-500',
    //     $value < 80 && $value >= 60 => 'bg-green-500',
    //     $value <= 100 && $value >= 80 => 'bg-blue-500',
    //     default => 'bg-gray-500',
    // };
    if ($value < 40) {
        $color = 'bg-red-500';
    } elseif ($value < 60) {
        $color = 'bg-yellow-500';
    } elseif ($value < 80) {
        $color = 'bg-green-500';
    } elseif ($value <= 100) {
        $color = 'bg-blue-500';
    } else {
        $color = 'bg-gray-500';
    }

    //dd($value, $color);

@endphp

<div class="flex items-center">
    <span class="mr-2">{{ $value }}%</span>
    <div class="relative w-full">
        <div class="flex overflow-hidden h-2 text-xs bg-purple-200 rounded">
            <div style="width: {{ $value }}%"
                class="flex flex-col justify-center text-center text-white whitespace-nowrap  {{ $color }}
                  shadow-none">
            </div>
        </div>
    </div>
</div>