@props([
    'label',
    'amount' => 0,
    'sub' => null,
    'tone' => 'indigo',
    'icon' => 'wallet',
    'href' => null,
    'delta' => null,
])

@php
    $tones = [
        'indigo' => 'from-brand-500 to-brand-700',
        'rose' => 'from-rose-500 to-rose-700',
        'sky' => 'from-sky-500 to-sky-700',
        'emerald' => 'from-emerald-500 to-emerald-700',
    ];
    $grad = $tones[$tone] ?? $tones['indigo'];

    $icons = [
        'wallet' => 'M21 12a2.25 2.25 0 0 0-2.25-2.25H5.25A2.25 2.25 0 0 1 3 7.5m18 4.5v4.5A2.25 2.25 0 0 1 18.75 18.75H5.25A2.25 2.25 0 0 1 3 16.5V7.5m18 4.5h-3.75a2.25 2.25 0 0 0 0 4.5H21m0-4.5V7.5A2.25 2.25 0 0 0 18.75 5.25H5.25',
        'alert' => 'M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126ZM12 15.75h.007v.008H12v-.008Z',
        'clock' => 'M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z',
        'check' => 'M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z',
    ];
    $path = $icons[$icon] ?? $icons['wallet'];
    $tag = $href ? 'a' : 'div';
@endphp

<{{ $tag }} @if($href) href="{{ $href }}" wire:navigate @endif class="card card-hover relative overflow-hidden p-5">
    <div class="absolute -right-6 -top-6 h-24 w-24 rounded-full bg-gradient-to-br {{ $grad }} opacity-[0.07]"></div>

    <div class="flex items-start justify-between">
        <span class="inline-flex h-10 w-10 items-center justify-center rounded-xl bg-gradient-to-br {{ $grad }} text-white shadow-sm">
            <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke-width="1.7" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="{{ $path }}" /></svg>
        </span>

        @if (! is_null($delta))
            <span @class([
                'badge text-xs',
                'bg-emerald-100 text-emerald-700 dark:bg-emerald-500/15 dark:text-emerald-300' => $delta >= 0,
                'bg-rose-100 text-rose-700 dark:bg-rose-500/15 dark:text-rose-300' => $delta < 0,
            ])>
                @if ($delta >= 0)
                    <svg class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 10.5 12 3m0 0 7.5 7.5M12 3v18" /></svg>
                @else
                    <svg class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 13.5 12 21m0 0-7.5-7.5M12 21V3" /></svg>
                @endif
                {{ abs($delta) }} %
            </span>
        @endif
    </div>

    <p class="mt-4 text-sm font-medium text-slate-500 dark:text-slate-400">{{ $label }}</p>
    <p class="mt-1 text-2xl font-bold tracking-tight text-slate-900 dark:text-white">{{ number_format((float) $amount, 2, ',', ' ') }} €</p>
    @if ($sub)
        <p class="mt-0.5 text-xs text-slate-400">{{ $sub }}</p>
    @endif
</{{ $tag }}>