{{--
    A dashboard KPI tile.

    Give it an href wherever possible: every number on the dashboard should
    answer "show me those", not just sit there. The hover lift exists to
    advertise exactly that.

        <x-stat-card label="Assigned" :value="318" icon="person-check"
                     color="primary" :href="route('assets.index', ['status' => 'assigned'])"
                     note="77% of fleet" />

    `color` is a Bootstrap theme name and drives only the icon tile — the number
    itself is always ink. Colouring the value would make a large "0" in red read
    as an error rather than as a count.
--}}
@props([
    'label',
    'value',
    'icon' => null,
    'color' => 'secondary',
    'href' => null,
    'note' => null,
])

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

<{{ $tag }}
    @if ($href) href="{{ $href }}" @endif
    {{ $attributes->merge(['class' => 'card ams-stat-card']) }}
>
    {{--
        Label first, then the number.

        Icon-then-number stacked down a tall card leaves the value floating in
        whitespace and gives the icon — the least informative thing present —
        top billing. Reading order here matches how the tile is actually used:
        find the metric you want, then read it.
    --}}
    <div class="ams-stat-card__body">
        <div class="ams-stat-card__head">
            <span class="ams-stat-card__label">{{ $label }}</span>

            @if ($icon)
                <span class="ams-tile ams-tile--sm ams-tile--{{ $color }}" aria-hidden="true">
                    <i class="bi bi-{{ $icon }}"></i>
                </span>
            @endif
        </div>

        <div class="ams-stat-card__value">{{ $value }}</div>

        @if ($note)
            <div class="ams-stat-card__note">{{ $note }}</div>
        @endif
    </div>
</{{ $tag }}>
