@props([
    'label' => 'Metric',
    'value' => '0',
    'icon' => null,
    'trend' => 'neutral',
    'trendValue' => null,
    'color' => 'primary',
])

@php
$colorMap = [
    'primary' => 'bg-primary-100 text-primary-700 dark:bg-primary-900/40 dark:text-primary-300',
    'accent' => 'bg-accent-100 text-accent-700 dark:bg-accent-900/40 dark:text-accent-300',
    'emerald' => 'bg-emerald-100 text-emerald-700 dark:bg-emerald-900/40 dark:text-emerald-300',
    'amber' => 'bg-amber-100 text-amber-700 dark:bg-amber-900/40 dark:text-amber-300',
    'rose' => 'bg-rose-100 text-rose-700 dark:bg-rose-900/40 dark:text-rose-300',
];

$trendMap = [
    'up' => 'bg-emerald-100 text-emerald-700 dark:bg-emerald-900/40 dark:text-emerald-300',
    'down' => 'bg-rose-100 text-rose-700 dark:bg-rose-900/40 dark:text-rose-300',
    'neutral' => 'bg-slate-100 text-slate-700 dark:bg-slate-700 dark:text-slate-200',
];

$iconClass = $colorMap[$color] ?? $colorMap['primary'];
$trendClass = $trendMap[$trend] ?? $trendMap['neutral'];
$fallbackIcon = '<path d="M12 3v18m9-9H3" />';
@endphp

<div {{ $attributes->merge(['class' => 'rounded-2xl border border-slate-100 bg-white p-5 shadow-lg dark:border-slate-700 dark:bg-slate-800']) }}>
    <div class="flex items-center justify-between gap-4">
        <div class="flex items-center gap-4">
            <div class="inline-flex h-12 w-12 items-center justify-center rounded-xl {{ $iconClass }}">
                <svg class="h-6 w-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                    {!! $icon ?: $fallbackIcon !!}
                </svg>
            </div>
            <div>
                <p class="text-sm font-medium text-slate-500 dark:text-slate-400">{{ $label }}</p>
                <p class="text-3xl font-bold text-slate-900 dark:text-slate-100">{{ $value }}</p>
            </div>
        </div>

        @if($trendValue)
            <span class="inline-flex items-center rounded-full px-2.5 py-1 text-xs font-semibold {{ $trendClass }}">
                {{ $trendValue }}
            </span>
        @endif
    </div>
</div>