@props([
    'title',
    'value',
    'subtext',
    'icon' => null,
    'color' => 'blue', // emerald, blue, purple, indigo, orange, pink, red
])

@php
    $colors = [
        'emerald' => [
            'icon_bg' => 'bg-gradient-to-br from-emerald-500 to-teal-500',
            'icon_glow' => 'shadow-emerald-500/25',
            'top_bar' => 'from-emerald-400 via-emerald-500 to-teal-500',
            'orb' => 'bg-emerald-400/25',
            'accent_text' => 'text-emerald-700',
        ],
        'blue' => [
            'icon_bg' => 'bg-gradient-to-br from-blue-500 to-indigo-600',
            'icon_glow' => 'shadow-blue-500/25',
            'top_bar' => 'from-sky-400 via-blue-500 to-indigo-500',
            'orb' => 'bg-blue-400/25',
            'accent_text' => 'text-blue-700',
        ],
        'purple' => [
            'icon_bg' => 'bg-gradient-to-br from-purple-500 to-fuchsia-600',
            'icon_glow' => 'shadow-purple-500/25',
            'top_bar' => 'from-purple-400 via-purple-500 to-fuchsia-500',
            'orb' => 'bg-purple-400/25',
            'accent_text' => 'text-purple-700',
        ],
        'indigo' => [
            'icon_bg' => 'bg-gradient-to-br from-indigo-500 to-violet-600',
            'icon_glow' => 'shadow-indigo-500/25',
            'top_bar' => 'from-indigo-400 via-indigo-500 to-violet-500',
            'orb' => 'bg-indigo-400/25',
            'accent_text' => 'text-indigo-700',
        ],
        'orange' => [
            'icon_bg' => 'bg-gradient-to-br from-orange-500 to-amber-500',
            'icon_glow' => 'shadow-orange-500/25',
            'top_bar' => 'from-amber-400 via-orange-500 to-red-500',
            'orb' => 'bg-orange-400/25',
            'accent_text' => 'text-orange-700',
        ],
        'pink' => [
            'icon_bg' => 'bg-gradient-to-br from-pink-500 to-rose-500',
            'icon_glow' => 'shadow-pink-500/25',
            'top_bar' => 'from-pink-400 via-pink-500 to-rose-500',
            'orb' => 'bg-pink-400/25',
            'accent_text' => 'text-pink-700',
        ],
        'red' => [
            'icon_bg' => 'bg-gradient-to-br from-red-500 to-rose-600',
            'icon_glow' => 'shadow-red-500/25',
            'top_bar' => 'from-red-400 via-red-500 to-rose-500',
            'orb' => 'bg-red-400/25',
            'accent_text' => 'text-red-700',
        ],
    ];

    $theme = $colors[$color] ?? $colors['blue'];
@endphp

<div class="glass-card group relative overflow-hidden rounded-2xl p-5 transition-all duration-300 hover:-translate-y-0.5 hover:shadow-2xl hover:shadow-blue-900/10">
    <!-- Top gradient bar -->
    <div class="absolute inset-x-0 top-0 h-[3px] bg-gradient-to-r {{ $theme['top_bar'] }}"></div>

    <!-- Decorative orb behind icon -->
    <div class="pointer-events-none absolute -right-6 -top-6 h-28 w-28 rounded-full {{ $theme['orb'] }} blur-2xl transition-opacity duration-500 group-hover:opacity-80"></div>

    <div class="relative flex items-start justify-between gap-4">
        <div class="flex-1 min-w-0">
            <p class="text-[11px] font-semibold uppercase tracking-wider text-zinc-500">{{ $title }}</p>
            <p class="mt-2 text-2xl font-bold tracking-tight text-zinc-900 sm:text-3xl">
                {{ $value }}
            </p>
            <p class="mt-1.5 truncate text-xs text-zinc-500">
                {{ $subtext }}
            </p>
            @isset($change)
                <div class="mt-2">{{ $change }}</div>
            @endisset
        </div>
        @if($icon)
            <div class="flex h-11 w-11 flex-shrink-0 items-center justify-center rounded-2xl {{ $theme['icon_bg'] }} shadow-lg {{ $theme['icon_glow'] }} ring-1 ring-white/40 transition-transform duration-300 group-hover:rotate-3 group-hover:scale-105">
                {{ $icon }}
            </div>
        @endif
    </div>
</div>