@props([
    'label' => '',
    'value' => '',
    'icon' => 'bi-graph-up',
    'tone' => 'primary', // primary | success | warning | danger | info | neutral
    'sub' => null,       // small caption under the value
    'meta' => [],        // ['Label' => 'value', ...] rendered in the footer
    'href' => null,
])

@php
    $tag = $href ? 'a' : 'div';
@endphp

<{{ $tag }} @if ($href) href="{{ $href }}" @endif
    {{ $attributes->merge(['class' => 'stat-card stat-card--' . $tone]) }}>

    <div class="stat-card__top">
        <div class="stat-card__text">
            <span class="stat-card__label">{{ $label }}</span>
            <span class="stat-card__value">{{ $value }}</span>
            @if ($sub)
                <span class="stat-card__sub">{{ $sub }}</span>
            @endif
        </div>

        <span class="stat-card__icon"><i class="bi {{ $icon }}"></i></span>
    </div>

    @if (!empty($meta))
        <div class="stat-card__meta">
            @foreach ($meta as $metaLabel => $metaValue)
                <span><span class="k">{{ $metaLabel }}</span><span class="v">{{ $metaValue }}</span></span>
            @endforeach
        </div>
    @endif

    {{ $slot }}
</{{ $tag }}>