@props([
    'label' => '',
    'value' => '',
    'trend' => null,
    'trendLabel' => '',
    'icon' => '',
    'color' => 'primary',
    'format' => 'raw',
])

@php
$colorMap = [
    'primary' => 'bg-primary-50 dark:bg-primary-900/20 text-primary-600 dark:text-primary-400',
    'success' => 'bg-green-50 dark:bg-green-900/20 text-green-600 dark:text-green-400',
    'warning' => 'bg-amber-50 dark:bg-amber-900/20 text-amber-600 dark:text-amber-400',
    'danger' => 'bg-red-50 dark:bg-red-900/20 text-red-600 dark:text-red-400',
];
$iconBg = $colorMap[$color] ?? $colorMap['primary'];

$displayValue = $value;
if ($format === 'currency') {
    $displayValue = 'GHS ' . number_format((float) $value, 2);
} elseif ($format === 'percentage') {
    $displayValue = number_format((float) $value, 1) . '%';
}
@endphp

<div {{ $attributes->merge(['class' => 'bg-white dark:bg-slate-800 rounded-xl shadow-sm border border-slate-200 dark:border-slate-700 p-5']) }}>
    <div class="flex items-start justify-between">
        <div class="flex-1 min-w-0">
            <p class="text-sm font-medium text-slate-500 dark:text-slate-400">{{ $label }}</p>
            <p class="text-3xl font-bold tracking-tight text-slate-900 dark:text-slate-100 mt-1">{{ $displayValue }}</p>
            @if($trend !== null)
                <div class="flex items-center gap-1 mt-1">
                    @if($trend > 0)
                        <svg class="w-4 h-4 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18"/></svg>
                        <span class="text-xs text-green-600 dark:text-green-400 font-medium">+{{ $trend }}%</span>
                    @elseif($trend < 0)
                        <svg class="w-4 h-4 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"/></svg>
                        <span class="text-xs text-red-600 dark:text-red-400 font-medium">{{ $trend }}%</span>
                    @endif
                    @if($trendLabel)
                        <span class="text-xs text-slate-400 dark:text-slate-500">{{ $trendLabel }}</span>
                    @endif
                </div>
            @endif
        </div>
        @if($icon)
            <div class="flex-shrink-0 ml-3">
                <div class="h-10 w-10 rounded-lg {{ $iconBg }} flex items-center justify-center">
                    <span class="text-lg">{{ $icon }}</span>
                </div>
            </div>
        @endif
    </div>
</div>