@props(['label', 'value', 'icon' => null, 'trend' => null, 'trendUp' => null])

<x-ui.card>
    <div class="flex items-center justify-between">
        <div>
            <p class="text-sm font-medium text-gray-500">{{ $label }}</p>
            <p class="mt-1 text-2xl font-semibold text-gray-900">{{ $value }}</p>
            @if($trend)
                <p class="mt-1 text-sm {{ $trendUp ? 'text-green-600' : 'text-red-600' }}">
                    @if($trendUp)
                        <svg class="inline w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18"/>
                        </svg>
                    @else
                        <svg class="inline w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"/>
                        </svg>
                    @endif
                    {{ $trend }}
                </p>
            @endif
        </div>
        @if($icon)
            <div class="p-3 bg-gray-100 rounded-full">
                <x-ui.icon :name="$icon" class="w-6 h-6 text-gray-600" />
            </div>
        @endif
    </div>
</x-ui.card>