@props(['title', 'value', 'icon', 'change', 'color'])

<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6 hover:shadow-md transition-shadow">
    <div class="flex items-center justify-between mb-4">
        <div class="w-12 h-12 bg-{{ $color }}-100 rounded-lg flex items-center justify-center">
            {!! $icon !!}
        </div>
        <span class="text-xs font-medium text-green-600 bg-green-50 px-2 py-1 rounded-full">{{ $change }}</span>
    </div>
    <h3 class="text-gray-600 text-sm font-medium mb-1">{{ $title }}</h3>
    <p class="text-3xl font-bold text-gray-900">{{ $value }}</p>
</div>