@props(['label', 'value', 'icon', 'color' => 'indigo', 'delay' => '0', 'hint' => null])

@php
    $iconBoxClass = match ($color) {
        'emerald' => 'icon-box-emerald',
        'amber' => 'icon-box-amber',
        'red' => 'icon-box-red',
        'violet' => 'icon-box-violet',
        'cyan' => 'icon-box-cyan',
        default => 'icon-box-indigo',
    };
    $accent = match ($color) {
        'emerald' => 'from-emerald-500/15 via-emerald-400/5 to-transparent',
        'amber' => 'from-amber-500/15 via-amber-400/5 to-transparent',
        'red' => 'from-rose-500/15 via-rose-400/5 to-transparent',
        'violet' => 'from-teal-600/15 via-cyan-400/5 to-transparent',
        'cyan' => 'from-cyan-500/15 via-teal-400/5 to-transparent',
        default => 'from-teal-600/15 via-cyan-400/5 to-transparent',
    };
@endphp

<div {{ $attributes->merge(['class' => 'dash-stat animate-slide-up']) }} style="animation-delay: {{ $delay }}ms">
    <div class="dash-stat-glow bg-gradient-to-br {{ $accent }}"></div>
    <div class="relative flex items-start justify-between gap-3">
        <div class="min-w-0">
            <p class="dash-stat-label">{{ $label }}</p>
            <p class="dash-stat-value">{{ $value }}</p>
            @if ($hint)
                <p class="dash-stat-hint">{{ $hint }}</p>
            @endif
        </div>
        <div class="{{ $iconBoxClass }} animate-icon-float shrink-0">
            <x-icon :name="$icon" class="w-5 h-5" />
        </div>
    </div>
</div>