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

@php
$accents = [
    'amber' => 'bg-amber-50 text-amber-600 dark:bg-amber-500/10 dark:text-amber-400',
    'green' => 'bg-green-50 text-green-600 dark:bg-green-500/10 dark:text-green-400',
    'blue' => 'bg-blue-50 text-blue-600 dark:bg-blue-500/10 dark:text-blue-400',
    'red' => 'bg-red-50 text-red-600 dark:bg-red-500/10 dark:text-red-400',
];
@endphp

<div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-100 dark:border-gray-700 p-5 flex items-center gap-4">
    <div class="h-11 w-11 rounded-lg flex items-center justify-center text-xl {{ $accents[$accent] ?? $accents['amber'] }}">
        {{ $icon }}
    </div>
    <div>
        <p class="text-sm text-gray-500 dark:text-gray-400">{{ $label }}</p>
        <p class="text-xl font-semibold text-gray-800 dark:text-gray-100">{{ $value }}</p>
    </div>
</div>