@props([
    'module' => '',
    'count'  => 0,
    'level'  => 'low',   // low | medium | high
])

@php
    $colors = [
        'low'    => ['bg' => 'bg-green-50',  'border' => 'border-green-200', 'badge' => 'bg-green-100 text-green-700',  'bar' => 'bg-green-400', 'icon' => 'text-green-500', 'label' => 'Low Load'],
        'medium' => ['bg' => 'bg-amber-50',  'border' => 'border-amber-200', 'badge' => 'bg-amber-100 text-amber-700',  'bar' => 'bg-amber-400', 'icon' => 'text-amber-500', 'label' => 'Medium Load'],
        'high'   => ['bg' => 'bg-red-50',    'border' => 'border-red-200',   'badge' => 'bg-red-100 text-red-700',      'bar' => 'bg-red-400',   'icon' => 'text-red-500',   'label' => 'High Load'],
    ];
    $c = $colors[$level] ?? $colors['low'];

    // Bar width: low < 5 → 25%, medium 5-20 → 60%, high > 20 → 90%
    $barWidth = match($level) {
        'high'   => '90%',
        'medium' => '60%',
        default  => '25%',
    };
@endphp

<div class="{{ $c['bg'] }} {{ $c['border'] }} border rounded-xl p-5 flex flex-col gap-3"
     x-data
     @mouseenter="$el.style.transform='scale(1.03)'; $el.style.boxShadow='0 8px 24px rgba(0,0,0,0.10)'"
     @mouseleave="$el.style.transform='scale(1)'; $el.style.boxShadow=''"
     style="transition: transform 300ms cubic-bezier(0.34,1.56,0.64,1), box-shadow 300ms ease">

    <div class="flex items-center justify-between">
        <span class="text-sm font-semibold text-gray-700">{{ $module }}</span>
        <span class="text-xs font-medium px-2 py-0.5 rounded-full {{ $c['badge'] }}">{{ $c['label'] }}</span>
    </div>

    <div class="flex items-end gap-2">
        <span class="text-3xl font-bold text-gray-800">{{ $count }}</span>
        <span class="text-sm text-gray-500 mb-1">pending</span>
    </div>

    {{-- Load indicator bar --}}
    <div class="w-full bg-gray-200 rounded-full h-2">
        <div class="{{ $c['bar'] }} h-2 rounded-full transition-all duration-700"
             style="width: {{ $barWidth }}"></div>
    </div>
</div>
