@props(['title', 'value', 'color' => 'blue', 'icon' => '📊'])

<div class="bg-white p-6 rounded-xl shadow-sm border-r-4 border-{{ $color }}-500 hover:shadow-md transition transform hover:-translate-y-1">
    <div class="flex justify-between items-center">
        <div>
            <div class="text-gray-500 text-sm mb-1">{{ $title }}</div>
            <div class="text-3xl font-bold text-gray-800">{{ $value }}</div>
        </div>
        <div class="text-3xl opacity-20 bg-{{ $color }}-100 p-3 rounded-full">
            {{ $icon }}
        </div>
    </div>
</div>