@props([
    'title' => 'Title',
    'value' => '0',
    'icon' => 'fa-chart-bar',
    'color' => 'blue',
    'subtitle' => null,
    'subtitleIcon' => 'fa-arrow-up',
    'subtitleColor' => 'green'
])

<div {{ $attributes->merge(['class' => 'bg-white rounded-2xl shadow-sm hover:shadow-xl transition-all border border-gray-100 overflow-hidden']) }}>
    <!-- Header Gold -->
    <div class="bg-gradient-to-r from-[#c9a84c] to-[#b8962a] px-4 py-3 flex items-center justify-between">
        <p class="text-white text-xs font-semibold uppercase tracking-wider">{{ $title }}</p>
        <i class="fas {{ $icon }} text-white/70 text-sm"></i>
    </div>
    
    <!-- Body -->
    <div class="p-6">
        <p class="text-3xl font-bold text-gray-800">{{ $value }}</p>
        @if($subtitle)
            <p class="text-xs text-{{ $subtitleColor }}-500 mt-2">
                <i class="fas {{ $subtitleIcon }} mr-1"></i>{{ $subtitle }}
            </p>
        @endif
        {{ $slot }}
    </div>
</div>