@props(['title' => '', 'value' => '', 'growth' => '', 'growthType' => 'up', 'iconBgClass' => '', 'iconColorClass' => '', 'subtitle' => ''])

<div class="bg-white rounded-2xl p-5 md:p-6 border border-gray-100 shadow-[0_2px_10px_-4px_rgba(0,0,0,0.05)] hover:shadow-md transition-shadow h-full flex flex-col justify-center">
    <div class="flex items-center gap-5">
        <!-- Icon -->
        <div class="w-[52px] h-[52px] rounded-2xl flex items-center justify-center shrink-0 {{ $iconBgClass }}">
            <div class="{{ $iconColorClass }}">
                {{ $slot }}
            </div>
        </div>
        
        <!-- Content -->
        <div class="flex flex-col">
            <span class="text-[13px] font-semibold text-gray-500 mb-1.5">{{ $title }}</span>
            <div class="flex items-end gap-3 mb-1">
                <span class="text-[34px] font-bold text-[#1e293b] leading-none">{{ $value }}</span>
            </div>
            
            @if($growth)
            <div class="flex items-center gap-1.5 mt-1">
                <span class="flex items-center text-[12px] font-bold {{ $growthType === 'up' ? 'text-[#10b981]' : 'text-[#ef4444]' }}">
                    @if($growthType === 'up')
                        <svg class="w-3.5 h-3.5 mr-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 10.5L12 3m0 0l7.5 7.5M12 3v18"/></svg>
                    @else
                        <svg class="w-3.5 h-3.5 mr-0.5 transform rotate-180" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 10.5L12 3m0 0l7.5 7.5M12 3v18"/></svg>
                    @endif
                    {{ $growth }}
                </span>
                <span class="text-[11px] text-gray-400 font-medium">{{ $subtitle }}</span>
            </div>
            @endif
        </div>
    </div>
</div>