@props([
    'icon' => 'ti-chart-bar',
    'color' => 'primary',
    'title' => '',
    'value' => '0',
    'trend' => null,        // 'up' | 'down' | null
    'change' => null,       // '+12%' | '-3%'
    'href' => null,
    'sparkline' => null,    // array of numbers for ApexCharts
])

@php $tag = $href ? 'a' : 'div'; @endphp

<{{ $tag }} {{ $attributes->merge(['class' => 'card card-sm']) }} @if($href) href="{{ $href }}" style="text-decoration: none;" @endif>
    <div class="card-body">
        <div class="row align-items-center">
            <div class="col-auto">
                <span class="bg-{{ $color }}-lt text-{{ $color }} avatar avatar-md">
                    <i class="ti {{ $icon }} fs-2"></i>
                </span>
            </div>
            <div class="col">
                <div class="font-weight-medium text-muted small">{{ $title }}</div>
                <div class="h2 mb-0">{{ $value }}</div>
                @if($change)
                    <div class="d-inline-flex align-items-center text-{{ $trend === 'up' ? 'green' : ($trend === 'down' ? 'red' : 'muted') }}">
                        <i class="ti ti-trending-{{ $trend === 'down' ? 'down' : 'up' }} me-1"></i>
                        <span>{{ $change }}</span>
                    </div>
                @endif
            </div>
            @if($sparkline)
                <div class="col-auto">
                    <div class="chart-sparkline" data-sparkline='{!! json_encode(array_values($sparkline)) !!}' data-color="{{ $color }}" style="width: 80px; height: 36px;"></div>
                </div>
            @endif
        </div>
    </div>
</{{ $tag }}>