@props([
    'label',
    'value',
    'hint' => null,
    'icon' => null,
    'compact' => false,
    'tone' => null, // primary|success|warning|danger|info|muted
])

@php
    $toneClass = match ($tone) {
        'primary' => 'tw-stat-tone-primary',
        'success' => 'tw-stat-tone-success',
        'warning' => 'tw-stat-tone-warning',
        'danger' => 'tw-stat-tone-danger',
        'info' => 'tw-stat-tone-info',
        'muted' => 'tw-stat-tone-muted',
        default => '',
    };
@endphp

<div {{ $attributes->merge([
    'class' => trim('tw-card tw-stat-card '.($compact ? 'tw-stat-card--compact p-2.5' : 'p-4').' '.$toneClass),
]) }}>
    <div class="flex items-start justify-between gap-2">
        <div class="min-w-0">
            <p class="{{ $compact ? 'text-[10px] tracking-[0.06em]' : 'text-[11px] tracking-[0.08em]' }} font-semibold uppercase text-[var(--color-text-muted)]">
                {{ $label }}
            </p>
            <p class="{{ $compact ? 'mt-0.5 text-base' : 'mt-1.5 text-2xl' }} font-bold tracking-tight text-[var(--color-text)] tabular-nums leading-tight">
                {{ $value }}
            </p>
            @if ($hint)
                <p class="{{ $compact ? 'mt-0.5 text-[10px]' : 'mt-1.5 text-xs' }} text-[var(--color-text-muted)] leading-snug">
                    {{ $hint }}
                </p>
            @endif
        </div>

        @if ($icon)
            <div class="tw-stat-icon flex {{ $compact ? 'h-7 w-7 rounded-md text-xs' : 'h-11 w-11 rounded-xl text-lg' }} shrink-0 items-center justify-center">
                @if (str_starts_with($icon, 'bi'))
                    <i class="{{ $icon }}"></i>
                @else
                    <x-ui.icon :name="$icon" class="{{ $compact ? 'h-3.5 w-3.5' : 'h-5 w-5' }}" />
                @endif
            </div>
        @endif
    </div>
</div>