@props([
    'color' => 'orange',
    'label' => '',
    'value' => '',
    'sub'   => null,
    'icon'  => 'wallet',
])

@php
    $colorMap = [
        'orange'  => ['icon_bg' => 'bg-orange-100 dark:bg-orange-500',  'icon_text' => 'text-orange-500 dark:text-orange-100'],
        'green'   => ['icon_bg' => 'bg-green-100 dark:bg-green-500',    'icon_text' => 'text-green-500 dark:text-green-100'],
        'blue'    => ['icon_bg' => 'bg-blue-100 dark:bg-blue-500',      'icon_text' => 'text-blue-500 dark:text-blue-100'],
        'purple'  => ['icon_bg' => 'bg-purple-100 dark:bg-purple-500',  'icon_text' => 'text-purple-500 dark:text-purple-100'],
        'red'     => ['icon_bg' => 'bg-red-100 dark:bg-red-500',        'icon_text' => 'text-red-500 dark:text-red-100'],
        'gray'    => ['icon_bg' => 'bg-gray-100 dark:bg-gray-600',      'icon_text' => 'text-gray-500 dark:text-gray-300'],
        'emerald' => ['icon_bg' => 'bg-emerald-100 dark:bg-emerald-500','icon_text' => 'text-emerald-500 dark:text-emerald-100'],
        'rose'    => ['icon_bg' => 'bg-rose-100 dark:bg-rose-500',      'icon_text' => 'text-rose-500 dark:text-rose-100'],
        'indigo'  => ['icon_bg' => 'bg-indigo-100 dark:bg-indigo-500',  'icon_text' => 'text-indigo-500 dark:text-indigo-100'],
        'yellow'  => ['icon_bg' => 'bg-yellow-100 dark:bg-yellow-500',  'icon_text' => 'text-yellow-500 dark:text-yellow-100'],
    ];

    $c       = $colorMap[$color] ?? $colorMap['orange'];
    $iconBg  = $c['icon_bg'];
    $iconTxt = $c['icon_text'];
@endphp

<div class="flex items-center p-4 bg-white rounded-2xl shadow-xs dark:bg-gray-800">
    {{-- Icon --}}
    <div class="p-3 mr-4 rounded-full {{ $iconBg }} {{ $iconTxt }}">
        @if($icon === 'wallet')
            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                <path fill-rule="evenodd" d="M4 4a2 2 0 00-2 2v4a2 2 0 002 2V6h10a2 2 0 00-2-2H4zm2 6a2 2 0 012-2h8a2 2 0 012 2v4a2 2 0 01-2 2H8a2 2 0 01-2-2v-4zm6 4a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd"/>
            </svg>
        @elseif($icon === 'users')
            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                <path d="M13 6a3 3 0 11-6 0 3 3 0 016 0zM18 8a2 2 0 11-4 0 2 2 0 014 0zM14 15a4 4 0 00-8 0v3h8v-3zM6 8a2 2 0 11-4 0 2 2 0 014 0zM16 18v-3a5.972 5.972 0 00-.75-2.906A3.005 3.005 0 0119 15v3h-3zM4.75 12.094A5.973 5.973 0 004 15v3H1v-3a3 3 0 013.75-2.906z"/>
            </svg>
        @elseif($icon === 'bot')
            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                <path d="M13 7H7v6h6V7z"/>
                <path fill-rule="evenodd" d="M7 2a1 1 0 012 0v1h2V2a1 1 0 112 0v1h2a2 2 0 012 2v2h1a1 1 0 110 2h-1v2h1a1 1 0 110 2h-1v2a2 2 0 01-2 2h-2v1a1 1 0 11-2 0v-1H9v1a1 1 0 11-2 0v-1H5a2 2 0 01-2-2v-2H2a1 1 0 110-2h1V9H2a1 1 0 010-2h1V5a2 2 0 012-2h2V2zM5 5h10v10H5V5z" clip-rule="evenodd"/>
            </svg>
        @elseif($icon === 'chart')
            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                <path d="M2 11a1 1 0 011-1h2a1 1 0 011 1v5a1 1 0 01-1 1H3a1 1 0 01-1-1v-5zM8 7a1 1 0 011-1h2a1 1 0 011 1v9a1 1 0 01-1 1H9a1 1 0 01-1-1V7zM14 4a1 1 0 011-1h2a1 1 0 011 1v12a1 1 0 01-1 1h-2a1 1 0 01-1-1V4z"/>
            </svg>
        @elseif($icon === 'arrow-up')
            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                <path fill-rule="evenodd" d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z" clip-rule="evenodd"/>
            </svg>
        @elseif($icon === 'arrow-down')
            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                <path fill-rule="evenodd" d="M3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"/>
            </svg>
        @elseif($icon === 'tag')
            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                <path fill-rule="evenodd" d="M17.707 9.293a1 1 0 010 1.414l-7 7a1 1 0 01-1.414 0l-7-7A.997.997 0 012 10V5a3 3 0 013-3h5c.256 0 .512.098.707.293l7 7zM5 6a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd"/>
            </svg>
        @elseif($icon === 'clock')
            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" clip-rule="evenodd"/>
            </svg>
        @else
            {{-- fallback: wallet --}}
            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                <path fill-rule="evenodd" d="M4 4a2 2 0 00-2 2v4a2 2 0 002 2V6h10a2 2 0 00-2-2H4zm2 6a2 2 0 012-2h8a2 2 0 012 2v4a2 2 0 01-2 2H8a2 2 0 01-2-2v-4zm6 4a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd"/>
            </svg>
        @endif
    </div>

    {{-- Text --}}
    <div>
        <p class="mb-1 text-sm font-medium text-gray-600 dark:text-gray-400">{{ $label }}</p>
        <p class="text-lg font-semibold text-gray-700 dark:text-gray-200">{{ $value }}</p>
        @if($sub)
            <p class="text-xs text-gray-500 dark:text-gray-400">{{ $sub }}</p>
        @endif
    </div>
</div>