@props([
    'title',
    'value',
    'badge',
    'color' => 'blue',
    'valueColor' => 'text-slate-800',
    'iconSize' => 'w-16 h-16',
    'rounded' => 'rounded-[1.25rem]',
    'gap' => 'gap-6',
    'bgIcon' => false,
])

@php
    $colorClasses = [
        'blue' => ['bg' => 'bg-blue-600', 'shadow' => 'shadow-blue-200', 'badgeBg' => 'bg-blue-50', 'badgeText' => 'text-blue-600', 'hoverBorder' => 'hover:border-blue-200'],
        'indigo' => ['bg' => 'bg-indigo-600', 'shadow' => 'shadow-indigo-200', 'badgeBg' => 'bg-indigo-50', 'badgeText' => 'text-indigo-600', 'hoverBorder' => 'hover:border-indigo-200'],
        'slate' => ['bg' => 'bg-slate-800', 'shadow' => 'shadow-slate-300', 'badgeBg' => 'bg-slate-100', 'badgeText' => 'text-slate-600', 'hoverBorder' => 'hover:border-slate-300'],
        'rose' => ['bg' => 'bg-rose-500', 'shadow' => 'shadow-rose-200', 'badgeBg' => 'bg-rose-50', 'badgeText' => 'text-rose-500', 'hoverBorder' => 'hover:border-rose-200'],
        'indigo' => ['bg' => 'bg-indigo-500', 'shadow' => 'shadow-indigo-200', 'badgeBg' => 'bg-indigo-50', 'badgeText' => 'text-indigo-600', 'hoverBorder' => 'hover:border-indigo-400 hover:shadow-lg hover:shadow-indigo-100/50'],
        'amber' => ['bg' => 'bg-amber-500', 'shadow' => 'shadow-amber-200', 'badgeBg' => 'bg-amber-50', 'badgeText' => 'text-amber-500', 'hoverBorder' => 'hover:border-amber-200'],
    ];
    $c = $colorClasses[$color] ?? $colorClasses['blue'];
@endphp

<div class="bg-white dark:bg-white/5 rounded-[2rem] p-6 border border-slate-100 dark:border-white/5 flex items-center {{ $gap }} {{ $c['hoverBorder'] }} dark:hover:border-indigo-500/20 transition duration-300 relative overflow-hidden group">
    @if($bgIcon)
    <div class="absolute right-0 bottom-0 text-indigo-500 opacity-5 -mr-4 -mb-4 transition-transform group-hover:scale-110">
        <svg class="w-24 h-24" fill="currentColor" viewBox="0 0 20 20"><path d="M9 4.804A7.968 7.968 0 005.5 4c-1.255 0-2.443.29-3.5.804v10A7.969 7.969 0 015.5 14c1.669 0 3.218.51 4.5 1.385A7.962 7.962 0 0114.5 14c1.255 0 2.443.29 3.5.804v-10A7.968 7.968 0 0014.5 4c-1.255 0-2.443.29-3.5.804V12a1 1 0 11-2 0V4.804z"></path></svg>
    </div>
    @endif

    <div class="relative z-10 {{ $iconSize }} {{ $c['bg'] }} {{ $rounded }} text-white flex items-center justify-center shadow-lg {{ $c['shadow'] }} dark:shadow-none shrink-0 group-hover:scale-105 transition-transform">
        {{ $slot }}
    </div>
    <div class="relative z-10">
        <p class="text-[10px] font-black text-slate-400 dark:text-slate-500 uppercase tracking-widest mb-0.5">{{ $title }}</p>
        <h3 class="text-3xl font-black {{ $valueColor }} dark:text-white">{{ $value }}</h3>
        <span class="{{ $c['badgeBg'] }} dark:bg-white/10 {{ $c['badgeText'] }} dark:text-indigo-400 text-[8px] font-black px-2 py-0.5 rounded uppercase tracking-widest mt-1 inline-block">{{ $badge }}</span>
    </div>
</div>