@props([
    'label'  => '',
    'value'  => '0',
    'icon'   => 'chart',   // chart | users | check | clock | calendar
    'color'  => 'blue',    // blue | green | red | yellow | purple
    'trend'  => null,      // '+5%' atau '-2%' atau null
    'trendUp'=> true,
])

@php
$colors = [
    'blue'   => ['bg' => 'bg-blue-100 dark:bg-blue-900',   'icon' => 'text-blue-600 dark:text-blue-400'],
    'green'  => ['bg' => 'bg-green-100 dark:bg-green-900', 'icon' => 'text-green-600 dark:text-green-400'],
    'red'    => ['bg' => 'bg-red-100 dark:bg-red-900',     'icon' => 'text-red-600 dark:text-red-400'],
    'yellow' => ['bg' => 'bg-yellow-100 dark:bg-yellow-900','icon'=> 'text-yellow-600 dark:text-yellow-400'],
    'purple' => ['bg' => 'bg-purple-100 dark:bg-purple-900','icon'=> 'text-purple-600 dark:text-purple-400'],
];
$c = $colors[$color] ?? $colors['blue'];
@endphp

<div {{ $attributes->merge(['class' => 'p-4 bg-white border border-gray-200 rounded-lg shadow-sm dark:bg-gray-800 dark:border-gray-700']) }}>
    <div class="flex items-center justify-between mb-3">
        <span class="text-sm font-medium text-gray-500 dark:text-gray-400">{{ $label }}</span>
        <div class="p-2 rounded-full {{ $c['bg'] }}">
            @if($icon === 'users')
                <svg class="w-5 h-5 {{ $c['icon'] }}" 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 === 'check')
                <svg class="w-5 h-5 {{ $c['icon'] }}" fill="currentColor" viewBox="0 0 20 20">
                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
                </svg>
            @elseif($icon === 'clock')
                <svg class="w-5 h-5 {{ $c['icon'] }}" 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>
            @elseif($icon === 'calendar')
                <svg class="w-5 h-5 {{ $c['icon'] }}" fill="currentColor" viewBox="0 0 20 20">
                    <path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd"/>
                </svg>
            @else
                <svg class="w-5 h-5 {{ $c['icon'] }}" fill="currentColor" viewBox="0 0 20 20">
                    <path d="M2 10a8 8 0 018-8v8h8a8 8 0 11-16 0z"/><path d="M12 2.252A8.014 8.014 0 0117.748 8H12V2.252z"/>
                </svg>
            @endif
        </div>
    </div>
    <div class="flex items-end justify-between">
        <span class="text-3xl font-bold text-gray-900 dark:text-white">{{ $value }}</span>
        @if($trend)
            <span class="flex items-center text-sm font-medium {{ $trendUp ? 'text-green-600 dark:text-green-400' : 'text-red-600 dark:text-red-400' }}">
                @if($trendUp)
                    <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M5.293 7.707a1 1 0 010-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 01-1.414 1.414L11 5.414V17a1 1 0 11-2 0V5.414L6.707 7.707a1 1 0 01-1.414 0z" clip-rule="evenodd"/></svg>
                @else
                    <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M14.707 12.293a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 111.414-1.414L9 14.586V3a1 1 0 012 0v11.586l2.293-2.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>
                @endif
                {{ $trend }}
            </span>
        @endif
    </div>
    @if(isset($slot) && $slot->isNotEmpty())
        <div class="mt-2 text-xs text-gray-500 dark:text-gray-400">{{ $slot }}</div>
    @endif
</div>