@props(['title', 'value', 'icon' => null, 'trend' => null, 'trendUp' => true, 'color' => 'primary'])

@php
$colors = [
    'primary' => 'bg-primary-50 text-primary-600',
    'green' => 'bg-green-50 text-green-600',
    'red' => 'bg-red-50 text-red-600',
    'yellow' => 'bg-yellow-50 text-yellow-600',
    'blue' => 'bg-blue-50 text-blue-600',
];
$colorClass = $colors[$color] ?? $colors['primary'];
@endphp

<div class="card">
    <div class="card-body">
        <div class="flex items-center justify-between">
            <div>
                <p class="text-sm font-medium text-gray-500">{{ $title }}</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 rounded-lg {{ $colorClass }}">
                    {!! $icon !!}
                </div>
            @endif
        </div>
    </div>
</div>