{{--
    Componente Card Statistica
    Componente riutilizzabile per visualizzare statistiche numeriche con icona
    
    Parametri:
    - title: Titolo della statistica
    - value: Valore numerico da visualizzare
    - icon: Classe CSS dell'icona (es: 'fas fa-building')
    - color: Colore del tema (primary, success, warning, danger, info)
    - subtitle: Sottotitolo opzionale
    - link: Link opzionale per rendere la card cliccabile
--}}

@props([
    'title' => 'Statistica',
    'value' => '0',
    'icon' => 'fas fa-chart-bar',
    'color' => 'primary',
    'subtitle' => null,
    'link' => null
])

@php
    $colorClasses = [
        'primary' => 'text-blue-500 bg-blue-100',
        'success' => 'text-green-500 bg-green-100',
        'warning' => 'text-yellow-500 bg-yellow-100',
        'danger' => 'text-red-500 bg-red-100',
        'info' => 'text-indigo-500 bg-indigo-100',
    ];
    
    $cardClass = $link ? 'cursor-pointer hover:shadow-lg transition-shadow' : '';
    $iconColor = $colorClasses[$color] ?? $colorClasses['primary'];
@endphp

<div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg {{ $cardClass }}"
     @if($link) onclick="window.location.href='{{ $link }}'" @endif>
    <div class="p-6">
        <div class="flex items-center">
            <!-- Icona -->
            <div class="flex-shrink-0">
                <div class="w-12 h-12 {{ $iconColor }} rounded-full flex items-center justify-center">
                    <i class="{{ $icon }} text-xl"></i>
                </div>
            </div>
            
            <!-- Contenuto -->
            <div class="ml-5 w-0 flex-1">
                <dl>
                    <dt class="text-sm font-medium text-gray-500 dark:text-gray-400 truncate">
                        {{ $title }}
                    </dt>
                    <dd class="text-2xl font-bold text-gray-900 dark:text-white">
                        {{ $value }}
                    </dd>
                    @if($subtitle)
                        <dd class="text-xs text-gray-500 dark:text-gray-400 mt-1">
                            {{ $subtitle }}
                        </dd>
                    @endif
                </dl>
            </div>
            
            <!-- Freccia se c'è un link -->
            @if($link)
                <div class="flex-shrink-0 ml-4">
                    <i class="fas fa-chevron-right text-gray-400"></i>
                </div>
            @endif
        </div>
    </div>
</div>