@props(['label', 'value', 'icon' => 'graph-up', 'trend' => null, 'trendUp' => true])

<div {{ $attributes->merge(['class' => 'hp-stat-card']) }}>
    <div class="d-flex align-items-start justify-content-between gap-3">
        <div>
            <div class="stat-label mb-1">{{ $label }}</div>
            <div class="stat-value">{{ $value }}</div>
            @if($trend)
                <small class="{{ $trendUp ? 'text-success' : 'text-danger' }} fw-semibold">
                    <i class="bi bi-arrow-{{ $trendUp ? 'up' : 'down' }}-short"></i> {{ $trend }}
                </small>
            @endif
        </div>
        <div class="stat-icon">
            <i class="bi bi-{{ $icon }}"></i>
        </div>
    </div>
</div>