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

@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',
    };
    $trendClass = $change === null ? 'text-slate-500' : ($change >= 0 ? 'text-emerald-400' : 'text-rose-400');
    $trendPrefix = $change === null ? '' : ($change >= 0 ? '+' : '');
@endphp

<div {{ $attributes->merge(['class' => 'stat-card']) }}>
    <div class="relative flex items-start justify-between gap-3">
        <div class="min-w-0">
            <p class="text-xs sm:text-sm text-slate-400 font-medium">{{ $label }}</p>
            <p class="text-2xl sm:text-3xl font-bold mt-1.5 text-white tabular-nums">{{ $value }}</p>
            @if ($change !== null)
                <p class="text-xs mt-1.5 {{ $trendClass }} font-medium tabular-nums">
                    {{ $trendPrefix }}{{ $change }}% vs previous period
                </p>
            @endif
        </div>
        <div class="{{ $iconBoxClass }}">
            <x-icon :name="$icon" class="w-5 h-5" />
        </div>
    </div>
</div>