@props([
    'label',
    'value',
    'icon' => null,
    'trend' => null,
    'tone' => 'neutral',
])

{{--
    Status is conveyed by an icon and a sign as well as by colour. Roughly one
    in twelve men has a colour vision deficiency, and a dashboard that encodes
    "bad" purely as red is unreadable to them.
--}}
<div {{ $attributes->merge(['class' => 'clinic-stat clinic-stat--'.$tone]) }}>
    @if ($icon)
        <div class="clinic-stat__icon"><i class="bi {{ $icon }}"></i></div>
    @endif

    <div class="clinic-stat__body">
        <div class="clinic-stat__label">{{ $label }}</div>
        <div class="clinic-stat__value">{{ $value }}</div>

        @if ($trend !== null)
            <div class="clinic-stat__trend">
                <i class="bi {{ $trend >= 0 ? 'bi-arrow-up-right' : 'bi-arrow-down-right' }}"></i>
                {{ $trend >= 0 ? '+' : '' }}{{ $trend }}%
            </div>
        @endif
    </div>
</div>