@props(['title' => '', 'value' => '0', 'icon' => 'bi-graph-up', 'trend' => 'up', 'trendValue' => '0%', 'color' => 'primary', 'subtitle' => '', 'sparklineId' => ''])

<div class="card border-0 shadow-sm h-100 kpi-card">
    <div class="card-body">
        <div class="d-flex align-items-start justify-content-between">
            <div class="flex-grow-1">
                <p class="text-muted mb-1 fw-medium" style="font-size:0.78rem;">{{ $title }}</p>
                <h3 class="fw-bold mb-1" style="font-size:1.6rem;line-height:1.2;">{{ $value }}</h3>
                <div class="d-flex align-items-center gap-1 mt-1">
                    @if($trend === 'up')
                        <span class="badge bg-success-subtle text-success" style="font-size:0.72rem;">
                            <i class="bi bi-arrow-up"></i> {{ $trendValue }}
                        </span>
                    @elseif($trend === 'down')
                        <span class="badge bg-danger-subtle text-danger" style="font-size:0.72rem;">
                            <i class="bi bi-arrow-down"></i> {{ $trendValue }}
                        </span>
                    @else
                        <span class="badge bg-secondary-subtle text-secondary" style="font-size:0.72rem;">
                            <i class="bi bi-dash"></i> {{ $trendValue }}
                        </span>
                    @endif
                    @if($subtitle)
                        <small class="text-muted" style="font-size:0.7rem;">{{ $subtitle }}</small>
                    @endif
                </div>
            </div>
            <div class="kpi-icon bg-{{ $color }}-subtle rounded-3 d-flex align-items-center justify-content-center flex-shrink-0" style="width:48px;height:48px;">
                <i class="bi {{ $icon }} text-{{ $color }}" style="font-size:1.3rem;"></i>
            </div>
        </div>
        @if($sparklineId)
            <div class="mt-2" id="{{ $sparklineId }}" style="height:35px;"></div>
        @endif
    </div>
</div>