<div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6 hover:shadow-xl transition-shadow duration-300">
    <div class="flex items-center justify-between">
        <div>
            <p class="text-sm text-gray-500 dark:text-gray-400">{{ $title }}</p>
            <p class="text-2xl font-bold text-gray-900 dark:text-white mt-1">{{ $value }}</p>
            <p class="text-xs text-{{ $color }}-600 dark:text-{{ $color }}-400 mt-2">
                {{ $trend }}
            </p>
        </div>
        <div class="p-3 rounded-full bg-{{ $color }}-100 dark:bg-{{ $color }}-900 text-{{ $color }}-600 dark:text-{{ $color }}-400">
            <i class="fas fa-{{ $icon }} text-xl"></i>
        </div>
    </div>
    @if(isset($href))
        <a href="{{ $href }}" class="mt-4 inline-flex items-center text-sm text-{{ $color }}-600 dark:text-{{ $color }}-400 hover:text-{{ $color }}-800 dark:hover:text-{{ $color }}-300">
            Detail <i class="fas fa-arrow-right ml-1"></i>
        </a>
    @endif
</div>