@props([
    'label',
    'value',
    'icon' => 'bi-grid',
    'accent' => 'var(--accent-color)',
    'trend' => null,
    'trendType' => 'positive',
])

<div {{ $attributes->merge(['class' => 'dash-stat-card']) }}>
    <div class="dash-stat-accent" style="background: {{ $accent }};"></div>
    <div class="dash-stat-body">
        <div class="dash-stat-icon" style="background: color-mix(in srgb, {{ $accent }}, transparent 88%); color: {{ $accent }};">
            <i class="bi {{ $icon }}"></i>
        </div>
        <div class="dash-stat-info">
            <span class="dash-stat-label">{{ $label }}</span>
            <span class="dash-stat-value">{{ $value }}</span>
        </div>
        @if ($trend)
            <div class="dash-stat-trend {{ $trendType }}">
                <i class="bi bi-arrow-{{ $trendType === 'positive' ? 'up' : 'down' }}"></i>
                <span>{{ $trend }}</span>
            </div>
        @endif
    </div>
</div>