@props([
    'label' => '',
    'value' => '—',
    'icon' => null,
    'tone' => 'neutral',
    'help' => null,
    'trend' => null,      // ['direction' => 'up|down|flat', 'value' => '+2.4%']
    'kind' => 'count',    // money | count | score
    'href' => null,
    'loading' => false,
])

@php
    $toneClass = 'stat--tone-' . ($tone ?: 'neutral');
    $classes = trim('stat ' . $toneClass . ($loading ? ' stat--loading' : ''));
    $Tag = $href ? 'a' : 'div';
@endphp

<{{ $Tag }}
    @if($href) href="{{ $href }}" @endif
    {{ $attributes->merge(['class' => $classes]) }}
    @if($help) title="{{ $help }}" @endif
>
    <div class="stat__head">
        @if($icon)
            <span class="stat__icon">{!! icon($icon) !!}</span>
        @endif
        <span class="stat__label">{{ $label }}</span>
    </div>
    <div class="stat__value" data-kind="{{ $kind }}">
        @if($loading)
            <span class="skeleton skeleton--text" style="width: 6rem;"></span>
        @else
            {{ $value }}
        @endif
    </div>
    @if($trend)
        <div class="stat__trend stat__trend--{{ $trend['direction'] ?? 'flat' }}">
            {!! icon('arrow-' . ($trend['direction'] === 'down' ? 'down' : ($trend['direction'] === 'up' ? 'up' : 'right')), 'stat__trend-icon') !!}
            <span>{{ $trend['value'] ?? '' }}</span>
            @isset($trend['label'])<small>{{ $trend['label'] }}</small>@endisset
        </div>
    @endif
    @if($help && ! $attributes->get('title'))
        <p class="stat__help">{{ $help }}</p>
    @endif
</{{ $Tag }}>