@props([
    'label' => '',
    'value' => '',
    'icon' => 'squares-2x2',
    'color' => 'brand',
    'trend' => null,
])

@php
    $iconStyles = [
        'brand'   => 'bg-brand-50 text-brand-700 ring-1 ring-brand-100',
        'indigo'  => 'bg-brand-50 text-brand-700 ring-1 ring-brand-100',
        'accent'  => 'bg-accent-50 text-accent-700 ring-1 ring-accent-100',
        'violet'  => 'bg-accent-50 text-accent-700 ring-1 ring-accent-100',
        'emerald' => 'bg-emerald-50 text-emerald-700 ring-1 ring-emerald-100',
        'amber'   => 'bg-brand-yellow-50 text-brand-yellow-700 ring-1 ring-brand-yellow-100',
        'rose'    => 'bg-brand-red-50 text-brand-red-700 ring-1 ring-brand-red-100',
        'sky'     => 'bg-sky-50 text-sky-700 ring-1 ring-sky-100',
        'slate'   => 'bg-slate-100 text-slate-600 ring-1 ring-slate-200',
    ];
    $iconClass = $iconStyles[$color] ?? $iconStyles['brand'];

    $trendUp = $trend !== null && ! \Illuminate\Support\Str::startsWith((string) $trend, '-');
    $trendClass = $trendUp
        ? 'bg-emerald-50 text-emerald-700 ring-1 ring-emerald-100'
        : 'bg-brand-red-50 text-brand-red-700 ring-1 ring-brand-red-100';
@endphp

<div {{ $attributes->merge(['class' => 'group relative overflow-hidden rounded-2xl bg-white p-5 ring-1 ring-slate-200/70 shadow-sm transition-all duration-200 hover:shadow-md hover:-translate-y-0.5']) }}>
    <div class="flex items-start justify-between gap-4">
        <div class="min-w-0 flex-1">
            <p class="text-xs font-medium uppercase tracking-wider text-slate-500">{{ $label }}</p>
            <p class="stat-value mt-2 text-2xl font-bold tracking-tight text-slate-900 truncate">{{ $value }}</p>
            @if ($trend !== null)
                <span class="mt-2 inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-[11px] font-semibold {{ $trendClass }}">
                    <x-icon :name="$trendUp ? 'chevron-up' : 'chevron-down'" class="h-3 w-3" />
                    {{ $trend }}
                </span>
            @endif
        </div>
        <span class="flex h-11 w-11 shrink-0 items-center justify-center rounded-xl {{ $iconClass }}">
            <x-icon :name="$icon" class="h-5 w-5" />
        </span>
    </div>
</div>