@props([
    'title',
    'value',
    'color' => 'primary'
])

@php
    $colors = [
        'primary' => 'text-[color:var(--primary-color)]',
        'green' => 'text-green-500',
        'yellow' => 'text-yellow-400',
        'red' => 'text-red-500',
    ];
@endphp

<div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow text-center">
    <h2 class="text-lg font-semibold text-gray-700 dark:text-white mb-2">{{ $title }}</h2>
    <p class="text-2xl font-bold {{ $colors[$color] ?? $colors['primary'] }}">{{ $value }}</p>
</div>