@props([
    'label',
    'value',
    'delta' => null,
    'deltaLabel' => null,
    'trend' => null,
    'icon' => null,
    'href' => null,
    'tone' => 'primary', // primary | success | warning | info | error | secondary
])
@php
    $trendClass = match($trend) {
        'up' => 'text-success',
        'down' => 'text-error',
        'flat' => 'text-base/60',
        default => 'text-base/60',
    };
    $trendIcon = match($trend) {
        'up' => 'ri-arrow-up-line',
        'down' => 'ri-arrow-down-line',
        default => null,
    };
    $toneBg = match($tone) {
        'success' => 'bg-success/10 group-hover:bg-success/20',
        'warning' => 'bg-warning/10 group-hover:bg-warning/20',
        'info'    => 'bg-info/10 group-hover:bg-info/20',
        'error'   => 'bg-error/10 group-hover:bg-error/20',
        'secondary' => 'bg-secondary/10 group-hover:bg-secondary/20',
        default   => 'bg-primary/10 group-hover:bg-primary/20',
    };
    $toneText = match($tone) {
        'success' => 'text-success',
        'warning' => 'text-warning',
        'info'    => 'text-info',
        'error'   => 'text-error',
        'secondary' => 'text-secondary',
        default   => 'text-primary',
    };
    $tag = $href ? 'a' : 'div';
@endphp
<{{ $tag }} @if($href) href="{{ $href }}" wire:navigate @endif
    {{ $attributes->merge(['class' => 'card-glass card-glass-hover hover-lift block p-5 group']) }}>
    <div class="flex items-start justify-between gap-3">
        <div class="min-w-0 flex-1">
            <p class="text-xs font-semibold tracking-wider uppercase text-base/60">{{ $label }}</p>
            <p class="mt-2 text-3xl font-bold tnum text-base">{{ $value }}</p>
            @if($delta !== null || $deltaLabel)
                <div class="mt-1 flex items-center gap-1.5 text-xs {{ $trendClass }}">
                    @if($trendIcon)
                        <x-dynamic-component :component="$trendIcon" class="size-3.5" />
                    @endif
                    @if($delta !== null)<span class="font-semibold tnum">{{ $delta }}</span>@endif
                    @if($deltaLabel)<span class="text-base/50">{{ $deltaLabel }}</span>@endif
                </div>
            @endif
        </div>
        @if($icon)
            <div class="size-10 rounded-lg {{ $toneBg }} {{ $toneText }} flex items-center justify-center shrink-0 transition-colors">
                <x-dynamic-component :component="$icon" class="size-5" />
            </div>
        @endif
    </div>
    @isset($slot)
        @if(trim($slot) !== '')
            <div class="mt-4">{{ $slot }}</div>
        @endif
    @endisset
</{{ $tag }}>