@props([
    'title',
    'value',
    'change' => null,
    'changeLabel' => 'vs mois dernier',
    'icon' => null,
    'color' => 'primary',
    'format' => 'number', // number, currency, percentage
    'link' => null
])

@php
    $colors = [
        'primary' => ['bg' => 'bg-primary-100 dark:bg-primary-900/50', 'text' => 'text-primary-600 dark:text-primary-400', 'icon' => 'text-primary-500'],
        'success' => ['bg' => 'bg-green-100 dark:bg-green-900/50', 'text' => 'text-green-600 dark:text-green-400', 'icon' => 'text-green-500'],
        'warning' => ['bg' => 'bg-yellow-100 dark:bg-yellow-900/50', 'text' => 'text-yellow-600 dark:text-yellow-400', 'icon' => 'text-yellow-500'],
        'danger' => ['bg' => 'bg-red-100 dark:bg-red-900/50', 'text' => 'text-red-600 dark:text-red-400', 'icon' => 'text-red-500'],
        'info' => ['bg' => 'bg-blue-100 dark:bg-blue-900/50', 'text' => 'text-blue-600 dark:text-blue-400', 'icon' => 'text-blue-500'],
    ];
    $colorClasses = $colors[$color] ?? $colors['primary'];
    
    $formattedValue = match($format) {
        'currency' => number_format($value, 0, ',', ' ') . ' FCFA',
        'percentage' => $value . '%',
        default => number_format($value, 0, ',', ' ')
    };
@endphp

<div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-100 dark:border-gray-700 p-6 hover:shadow-md transition-shadow">
    <div class="flex items-center justify-between">
        <div class="flex-1">
            <p class="text-sm font-medium text-gray-500 dark:text-gray-400 mb-1">{{ $title }}</p>
            <p class="text-2xl font-bold text-gray-900 dark:text-white">{{ $formattedValue }}</p>
            
            @if($change !== null)
            <div class="flex items-center mt-2 text-sm">
                @if($change > 0)
                    <span class="text-green-600 dark:text-green-400 flex items-center">
                        <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20">
                            <path fill-rule="evenodd" d="M5.293 9.707a1 1 0 010-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 01-1.414 1.414L11 7.414V15a1 1 0 11-2 0V7.414L6.707 9.707a1 1 0 01-1.414 0z" clip-rule="evenodd"/>
                        </svg>
                        +{{ $change }}%
                    </span>
                @elseif($change < 0)
                    <span class="text-red-600 dark:text-red-400 flex items-center">
                        <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20">
                            <path fill-rule="evenodd" d="M14.707 10.293a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 111.414-1.414L9 12.586V5a1 1 0 012 0v7.586l2.293-2.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
                        </svg>
                        {{ $change }}%
                    </span>
                @else
                    <span class="text-gray-500 dark:text-gray-400">0%</span>
                @endif
                <span class="text-gray-400 dark:text-gray-500 ml-1">{{ $changeLabel }}</span>
            </div>
            @endif
        </div>

        @if($icon)
        <div class="{{ $colorClasses['bg'] }} rounded-full p-3">
            <span class="text-2xl">{{ $icon }}</span>
        </div>
        @endif
    </div>

    @if($link)
    <a href="{{ $link }}" class="mt-4 inline-flex items-center text-sm {{ $colorClasses['text'] }} hover:underline">
        Voir détails
        <svg class="w-4 h-4 ml-1" fill="currentColor" viewBox="0 0 20 20">
            <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"/>
        </svg>
    </a>
    @endif
</div>
