@props([
    'title',
    'value',
    'icon' => null,
    'color' => 'indigo',
    'trend' => null,
    'trendValue' => null,
])

@php
    $colorClasses = [
        'indigo' => 'bg-indigo-100 dark:bg-indigo-900/30 text-indigo-600 dark:text-indigo-400',
        'green' => 'bg-green-100 dark:bg-green-900/30 text-green-600 dark:text-green-400',
        'red' => 'bg-red-100 dark:bg-red-900/30 text-red-600 dark:text-red-400',
        'blue' => 'bg-blue-100 dark:bg-blue-900/30 text-blue-600 dark:text-blue-400',
        'yellow' => 'bg-yellow-100 dark:bg-yellow-900/30 text-yellow-600 dark:text-yellow-400',
        'purple' => 'bg-purple-100 dark:bg-purple-900/30 text-purple-600 dark:text-purple-400',
    ];
@endphp

<div {{ $attributes->merge(['class' => 'bg-white dark:bg-gray-800 rounded-xl shadow-sm p-6']) }}>
    <div class="flex items-center justify-between">
        <div class="flex-1">
            <p class="text-sm font-medium text-gray-500 dark:text-gray-400">{{ $title }}</p>
            <p class="text-2xl font-bold text-gray-900 dark:text-white mt-1">{{ $value }}</p>

            @if($trend && $trendValue)
                <div class="flex items-center mt-2">
                    @if($trend === 'up')
                        <i class="fas fa-arrow-up text-green-500 text-xs"></i>
                        <span class="text-sm text-green-500 ml-1">{{ $trendValue }}</span>
                    @else
                        <i class="fas fa-arrow-down text-red-500 text-xs"></i>
                        <span class="text-sm text-red-500 ml-1">{{ $trendValue }}</span>
                    @endif
                    <span class="text-xs text-gray-500 dark:text-gray-400 ml-1">vs last month</span>
                </div>
            @endif
        </div>

        @if($icon)
            <div class="w-12 h-12 rounded-lg flex items-center justify-center {{ $colorClasses[$color] ?? $colorClasses['indigo'] }}">
                <i class="fas fa-{{ $icon }} text-xl"></i>
            </div>
        @endif
    </div>
</div>