@props([
    'label',
    'value',
    'subtitle' => null,
    'icon' => null,
    'color' => 'emerald', // emerald, cyan, purple, amber, blue, pink
    'trend' => null, // up, down, neutral
    'trendValue' => null,
])

@php
    $colorClasses = [
        'emerald' => ['bg' => 'bg-emerald-500/10', 'text' => 'text-emerald-400', 'border' => 'hover:border-emerald-500/30', 'gradient' => 'from-emerald-500/5'],
        'cyan' => ['bg' => 'bg-cyan-500/10', 'text' => 'text-cyan-400', 'border' => 'hover:border-cyan-500/30', 'gradient' => 'from-cyan-500/5'],
        'purple' => ['bg' => 'bg-purple-500/10', 'text' => 'text-purple-400', 'border' => 'hover:border-purple-500/30', 'gradient' => 'from-purple-500/5'],
        'amber' => ['bg' => 'bg-amber-500/10', 'text' => 'text-amber-400', 'border' => 'hover:border-amber-500/30', 'gradient' => 'from-amber-500/5'],
        'blue' => ['bg' => 'bg-blue-500/10', 'text' => 'text-blue-400', 'border' => 'hover:border-blue-500/30', 'gradient' => 'from-blue-500/5'],
        'pink' => ['bg' => 'bg-pink-500/10', 'text' => 'text-pink-400', 'border' => 'hover:border-pink-500/30', 'gradient' => 'from-pink-500/5'],
    ];
    $colors = $colorClasses[$color] ?? $colorClasses['emerald'];
@endphp

<div class="group relative glass-card rounded-2xl p-5 {{ $colors['border'] }} transition-all duration-300 overflow-hidden">
    {{-- Hover gradient --}}
    <div class="absolute inset-0 bg-gradient-to-br {{ $colors['gradient'] }} to-transparent opacity-0 group-hover:opacity-100 transition-opacity"></div>

    <div class="relative">
        {{-- Header --}}
        <div class="flex items-center justify-between mb-4">
            <span class="text-xs font-semibold text-db-text-muted uppercase tracking-wider">{{ $label }}</span>
            @if($icon)
            <div class="w-10 h-10 rounded-xl {{ $colors['bg'] }} flex items-center justify-center group-hover:scale-110 transition-transform">
                {!! $icon !!}
            </div>
            @endif
        </div>

        {{-- Value --}}
        <div class="text-4xl font-bold text-db-text-primary tracking-tight">{{ $value }}</div>

        {{-- Subtitle / Trend --}}
        @if($subtitle || $trend)
        <div class="flex items-center gap-2 mt-2">
            @if($trend && $trendValue)
            <span class="inline-flex items-center gap-1 text-xs font-medium {{ $trend === 'up' ? 'text-emerald-400' : ($trend === 'down' ? 'text-red-400' : 'text-db-text-muted') }}">
                @if($trend === 'up')
                <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18"/></svg>
                @elseif($trend === 'down')
                <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"/></svg>
                @endif
                {{ $trendValue }}
            </span>
            @endif
            @if($subtitle)
            <p class="text-xs text-db-text-muted">{{ $subtitle }}</p>
            @endif
        </div>
        @endif

        {{-- Optional slot for custom content (like progress bars) --}}
        @if($slot->isNotEmpty())
        <div class="mt-3">
            {{ $slot }}
        </div>
        @endif
    </div>
</div>