@props([
    'title' => '',
    'value' => 0,
    'icon' => 'fa-chart-simple',
    'color' => 'primary',
    'meta' => null,
    'url' => null,
])

<div class="card h-100">
    <div class="stat-card">
        <div class="stat-icon bg-{{ $color }}-subtle text-{{ $color }}">
            <i class="fa-solid {{ $icon }}"></i>
        </div>
        <div class="flex-grow-1 min-w-0">
            <div class="stat-value">{{ $value }}</div>
            <div class="stat-label">{{ $title }}</div>
            @if ($meta)
                <div class="stat-meta text-{{ $color }}">{{ $meta }}</div>
            @endif
        </div>
        @if ($url)
            <a href="{{ $url }}" class="btn btn-light btn-icon" data-bs-toggle="tooltip" title="عرض التفاصيل">
                <i class="fa-solid fa-arrow-left"></i>
            </a>
        @endif
    </div>
</div>