@props(['label', 'value', 'color' => 'text-gray-800', 'icon' => null])

<div class="bg-white p-4 rounded-2xl shadow border border-gray-200 flex items-center justify-between space-x-4">
    <div class="flex items-center space-x-3">
        @if($icon)
            <div class="p-2 rounded-full bg-gray-100">
                <x-lucide::{{ $icon }} class="w-5 h-5 {{ $color }}" />
            </div>
        @endif
        <div class="flex flex-col">
            <span class="text-sm text-gray-500 font-medium leading-none">{{ $label }}</span>
            <span class="text-xl font-semibold text-gray-800">{{ $value }}</span>
        </div>
    </div>
</div>