@props([
    'label'   => '',
    'value'   => '',
    'subtext' => '',
    'icon'    => 'fa-chart-line',
    'color'   => 'blue',
    'trend'   => null,
])

<div class="bg-white/80 backdrop-blur-sm rounded-xl p-6 shadow-lg border border-{{ $color }}-100
            transition-all duration-300 cursor-default"
     x-data="{ hovered: false }"
     @mouseenter="hovered = true"
     @mouseleave="hovered = false"
     :style="hovered
        ? 'transform: scale(1.03); box-shadow: 0 20px 40px rgba(0,0,0,0.12); transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.3s ease'
        : 'transform: scale(1); box-shadow: none; transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.3s ease'">

    <div class="flex items-center justify-between mb-3">
        <div class="w-10 h-10 bg-{{ $color }}-100 rounded-lg flex items-center justify-center">
            <i class="fas {{ $icon }} text-{{ $color }}-600"></i>
        </div>
        @if($trend)
            <span class="text-xs font-medium px-2 py-0.5 rounded-full bg-green-50 text-green-600">
                {{ $trend }}
            </span>
        @endif
    </div>

    <p class="text-gray-500 text-sm mb-1">{{ $label }}</p>

    <p class="text-2xl font-bold text-gray-800">
        {{ $value }}
    </p>

    @if($subtext)
        <p class="text-xs text-gray-400 mt-1">{{ $subtext }}</p>
    @endif
</div>
