@props(['title', 'value', 'icon' => null, 'trend' => null, 'trendUp' => true, 'color' => 'brand-orange'])

<div
   class="bg-white dark:bg-berry-light rounded-2xl p-6 shadow-sm border border-slate-100 dark:border-white/5 transition-all hover:-translate-y-1 hover:shadow-md flex items-center gap-5">
    
    <div class="shrink-0 h-14 w-14 rounded-full flex items-center justify-center bg-{{ $color }}/10 text-{{ $color }}">
        @if(isset($icon))
            {{ $icon }}
        @elseif($attributes->has('icon'))
             <x-dynamic-component :component="$attributes->get('icon')" class="w-7 h-7" />
        @else
            <!-- Default Icon -->
            <svg class="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"></path>
            </svg>
        @endif
    </div>

    <div class="flex-1">
        <p class="text-xs font-bold uppercase tracking-widest text-slate-400 dark:text-slate-500 mb-0.5">
            {{ $title }}
        </p>
        <h3 class="text-2xl font-extrabold text-slate-800 dark:text-white tracking-tight leading-none">
            {{ $value }}
        </h3>
        
        @if($trend)
            <div class="flex items-center gap-1 mt-1.5">
                <span class="text-xs font-bold {{ $trendUp ? 'text-brand-green' : 'text-red-500' }} flex items-center">
                    {{ $trendUp ? '↑' : '↓' }} {{ $trend }}
                </span>
                <span class="text-[10px] text-slate-400 dark:text-slate-600 uppercase">vs mes anterior</span>
            </div>
        @endif
    </div>
</div>