@props(['title', 'value' => 0, 'delta' => 0, 'trend' => 'stable', 'format' => 'number', 'hint' => null])

@php
    $formatted = match($format) {
        'currency' => '$' . number_format((float) $value, 2),
        'percent' => number_format((float) $value, 1) . '%',
        default => number_format((float) $value),
    };
    $deltaAbs = number_format(abs((float) $delta), 1);
    
    $badgeColor = match($trend) {
        'up' => 'bg-emerald-50 text-emerald-700 border border-emerald-200 dark:bg-brand-emerald-950/30 dark:text-brand-emerald-400 dark:border-brand-emerald-500/20',
        'down' => 'bg-red-50 text-red-700 border border-red-200 dark:bg-red-950/30 dark:text-red-400 dark:border-red-500/20',
        default => 'bg-slate-100 text-slate-600 border border-slate-200 dark:bg-brand-charcoal-800/40 dark:text-brand-charcoal-350 dark:border-brand-charcoal-800',
    };
    
    $icon = match($trend) {
        'up' => 'uil uil-arrow-grow',
        'down' => 'uil uil-arrow-down-left',
        default => 'uil uil-minus',
    };
@endphp

<div class="bg-white dark:bg-brand-charcoal-900 border border-slate-200 dark:border-brand-charcoal-800 rounded-xl p-5 shadow-sm hover:border-brand-emerald-500/30 hover:-translate-y-0.5 transition-all duration-300 flex flex-col justify-between select-none">
    <div class="flex justify-between items-start">
        <div>
            <h6 class="text-[10px] font-bold tracking-widest text-slate-400 dark:text-brand-charcoal-400 uppercase mb-1.5">{{ $title }}</h6>
            <h3 class="text-2xl font-bold tracking-tight text-slate-800 dark:text-brand-charcoal-100 font-serif leading-none">{{ $formatted }}</h3>
            @if($hint)
                <small class="text-xs text-slate-500 dark:text-brand-charcoal-500 mt-1.5 block font-medium">{{ $hint }}</small>
            @endif
        </div>
        <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-semibold leading-4 {{ $badgeColor }} shrink-0">
            <i class="{{ $icon }} text-base me-1"></i>{{ $deltaAbs }}%
        </span>
    </div>
</div>