@props([
    'icon' => null,
    'value',
    'label',
    'trend' => null,
])

<x-ui.card>
    <div class="flex items-center gap-4">
        @if($icon)
            <div class="p-3 bg-warm-gray/10 rounded-lg">
                <flux:icon :name="$icon" class="w-6 h-6 text-warm-gray" />
            </div>
        @endif
        <div>
            <div class="text-2xl font-bold text-charcoal">{{ $value }}</div>
            <div class="text-sm text-charcoal/70">{{ $label }}</div>
            @if($trend !== null)
                @php
                    $trendClass = match(true) {
                        $trend > 0 => 'text-success',
                        $trend < 0 => 'text-danger',
                        default => 'text-charcoal/50',
                    };
                    $trendPrefix = $trend > 0 ? '+' : '';
                @endphp
                <div class="text-xs {{ $trendClass }}">
                    {{ $trendPrefix }}{{ $trend }}%
                </div>
            @endif
        </div>
    </div>
</x-ui.card>