@props([
    'title' => '',
    'value' => '',
    'icon' => null,
    'meta' => null,
    'tone' => 'primary',
    'change' => null,
    'changeTone' => 'neutral',
    'hint' => null,
])
@php
    $toneClass = match($tone) {
        'success' => 'success',
        'warning' => 'warning',
        'danger' => 'danger',
        'secondary' => 'secondary',
        default => 'primary',
    };
    $changeClass = match($changeTone) {
        'positive' => 'positive',
        'negative' => 'negative',
        default => '',
    };
@endphp
<div class="stat-card modern h-100">
    <div class="d-flex justify-content-between align-items-start mb-2">
        @if($icon)
            <span class="stat-icon {{ $toneClass }}">{!! $icon !!}</span>
        @endif
        {{ $actions ?? '' }}
    </div>
    <p class="stat-label mb-1">{{ $title }}</p>
    <div class="d-flex align-items-center gap-2">
        <span class="stat-value">{{ $value }}</span>
        @if($change)
            <span class="stat-change {{ $changeClass }}">{{ $change }}</span>
        @endif
    </div>
    @if($meta)
        <p class="stat-meta mb-0">{{ $meta }}</p>
    @endif
    @if($hint)
        <small class="text-muted">{{ $hint }}</small>
    @endif
</div>
