@props(['title' => null, 'footer' => null, 'variant' => 'default', 'hover' => true])

@php
    $cardClasses = 'bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden';
    
    if ($hover) {
        $cardClasses .= ' transition-transform duration-300 hover:shadow-lg hover:-translate-y-1';
    }
    
    if ($variant === 'primary') {
        $cardClasses .= ' border-t-4 border-blue-500';
    } elseif ($variant === 'success') {
        $cardClasses .= ' border-t-4 border-green-500';
    } elseif ($variant === 'warning') {
        $cardClasses .= ' border-t-4 border-yellow-500';
    } elseif ($variant === 'danger') {
        $cardClasses .= ' border-t-4 border-red-500';
    } elseif ($variant === 'info') {
        $cardClasses .= ' border-t-4 border-teal-500';
    }
@endphp

<div {{ $attributes->merge(['class' => $cardClasses]) }}>
    @if ($title)
        <div class="px-4 py-3 border-b border-gray-200 dark:border-gray-700">
            <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">{{ $title }}</h3>
        </div>
    @endif
    
    <div class="p-4">
        {{ $slot }}
    </div>
    
    @if ($footer)
        <div class="px-4 py-3 bg-gray-50 dark:bg-gray-700 border-t border-gray-200 dark:border-gray-700">
            {{ $footer }}
        </div>
    @endif
</div>