@props([
    'icon' => 'fa-circle',
    'title' => '',
    'value' => '',
    'color' => 'gray',
    'prefix' => ''
])

<div class="bg-white p-4 sm:p-6 rounded-2xl shadow hover:shadow-lg transition duration-200">
    <div class="flex items-center justify-between mb-3">
        <h2 class="text-base sm:text-lg font-semibold text-gray-600">{{ $title }}</h2>
        <i class="fa-solid {{ $icon }} text-{{ $color }}-500 text-lg sm:text-xl"></i>
    </div>
    <p class="text-2xl sm:text-3xl font-bold text-gray-900">
        {{ $prefix }}{{ $value }}
    </p>
    {{ $slot }}
</div>