@props(['label', 'value' => 0, 'hint' => '', 'icon' => 'fa-chart-simple'])

<div class="col-xl-3 col-md-6">
    <div class="card wms-metric-card mb-4">
        <div class="card-body d-flex align-items-center justify-content-between">
            <div>
                <div class="wms-metric-card__label">{{ $label }}</div>
                <div class="wms-metric-card__value">{{ is_numeric($value) ? number_format((int) $value) : $value }}</div>
                @if ($hint !== '')
                    <div class="wms-metric-card__hint">{{ $hint }}</div>
                @endif
            </div>
            <div class="wms-metric-card__icon">
                <i class="fas {{ $icon }}"></i>
            </div>
        </div>
    </div>
</div>