{{--
    Componente Card Azione Rapida
    Card per azioni rapide nella dashboard con icona, titolo e descrizione
    
    Parametri:
    - title: Titolo dell'azione
    - description: Descrizione dell'azione
    - icon: Icona dell'azione
    - link: Link di destinazione
    - color: Colore del tema (primary, success, warning, danger, info)
    - badge: Testo del badge opzionale (es: "Nuovo", "3")
    - badgeColor: Colore del badge
--}}

@props([
    'title' => 'Azione',
    'description' => 'Descrizione dell\'azione',
    'icon' => 'fas fa-cog',
    'link' => '#',
    'color' => 'primary',
    'badge' => null,
    'badgeColor' => 'red'
])

@php
    $colorClasses = [
        'primary' => 'hover:bg-blue-50 dark:hover:bg-blue-900/20 border-blue-200',
        'success' => 'hover:bg-green-50 dark:hover:bg-green-900/20 border-green-200',
        'warning' => 'hover:bg-yellow-50 dark:hover:bg-yellow-900/20 border-yellow-200',
        'danger' => 'hover:bg-red-50 dark:hover:bg-red-900/20 border-red-200',
        'info' => 'hover:bg-indigo-50 dark:hover:bg-indigo-900/20 border-indigo-200',
    ];
    
    $badgeColors = [
        'red' => 'bg-red-100 text-red-800',
        'green' => 'bg-green-100 text-green-800',
        'blue' => 'bg-blue-100 text-blue-800',
        'yellow' => 'bg-yellow-100 text-yellow-800',
    ];
    
    $hoverClass = $colorClasses[$color] ?? $colorClasses['primary'];
    $badgeClass = $badgeColors[$badgeColor] ?? $badgeColors['red'];
@endphp

<a href="{{ $link }}" 
   class="block bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg p-6 shadow-sm transition-all duration-200 {{ $hoverClass }}">
    <div class="flex items-start">
        <!-- Icona -->
        <div class="flex-shrink-0">
            <i class="{{ $icon }} text-2xl text-gray-600 dark:text-gray-400"></i>
        </div>
        
        <!-- Contenuto -->
        <div class="ml-4 flex-1">
            <div class="flex items-center justify-between">
                <h3 class="text-lg font-semibold text-gray-900 dark:text-white">
                    {{ $title }}
                </h3>
                
                <!-- Badge opzionale -->
                @if($badge)
                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium {{ $badgeClass }}">
                        {{ $badge }}
                    </span>
                @endif
            </div>
            
            <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">
                {{ $description }}
            </p>
        </div>
        
        <!-- Freccia -->
        <div class="flex-shrink-0 ml-4">
            <i class="fas fa-chevron-right text-gray-400"></i>
        </div>
    </div>
</a>