@props(['course', 'enrollment' => null, 'showProgress' => false])

<div {{ $attributes->merge(['class' => 'bg-white p-6 rounded-2xl border border-gray-100 shadow-sm hover:shadow-lg transition-all group relative overflow-hidden']) }}>
    <!-- Background Accent -->
    <div class="absolute -top-12 -right-12 w-32 h-32 bg-blue-50 rounded-full opacity-50 group-hover:scale-150 transition-transform duration-500"></div>
    
    <div class="relative">
        <!-- Header -->
        <div class="flex justify-between items-start mb-4">
            <div class="flex-1">
                <span class="inline-block px-3 py-1 bg-gray-100 text-gray-600 text-[10px] font-bold rounded-lg uppercase tracking-wider mb-2">
                    {{ $course->department->name ?? 'Département' }}
                </span>
                <h3 class="text-xl font-display font-bold text-gray-900 group-hover:text-royal-blue transition-colors line-clamp-2">
                    {{ $course->title }}
                </h3>
                <p class="text-sm text-gray-500 mt-1">{{ $course->department->faculty->name ?? 'Faculté' }}</p>
            </div>
            
            @if($course->is_certification)
                <div class="flex items-center gap-1 px-3 py-1.5 bg-amber-50 text-amber-600 rounded-xl text-xs font-bold">
                    <i class="fa-solid fa-certificate"></i>
                    <span>Certifiant</span>
                </div>
            @endif
        </div>

        <!-- Progress Bar (if showProgress) -->
        @if($showProgress && $enrollment)
            <div class="mb-4">
                <div class="flex justify-between items-center mb-2">
                    <span class="text-xs font-semibold text-gray-500">Progression</span>
                    <span class="text-xs font-bold text-royal-blue">{{ $enrollment->progress ?? 0 }}%</span>
                </div>
                <div class="w-full h-2 bg-gray-100 rounded-full overflow-hidden">
                    <div class="h-full royal-gradient rounded-full transition-all duration-500" style="width: {{ $enrollment->progress ?? 0 }}%"></div>
                </div>
            </div>
        @endif

        <!-- Stats -->
        <div class="grid grid-cols-2 gap-3 mb-5">
            <div class="p-3 bg-gray-50 rounded-xl">
                <span class="block text-xs text-gray-400 font-semibold uppercase mb-1">Leçons</span>
                <span class="text-lg font-bold text-gray-700">{{ $course->lessons_count ?? 0 }}</span>
            </div>
            <div class="p-3 bg-gray-50 rounded-xl">
                <span class="block text-xs text-gray-400 font-semibold uppercase mb-1">Durée</span>
                <span class="text-lg font-bold text-gray-700">{{ $course->duration ?? 'N/A' }}</span>
            </div>
        </div>

        <!-- Actions -->
        <div class="flex gap-3">
            <a href="{{ route('courses.show', $course) }}" class="flex-1 bg-slate-900 text-white text-center py-3 rounded-xl text-sm font-bold hover:bg-slate-800 transition-colors">
                {{ $enrollment ? 'Continuer' : 'Découvrir' }}
            </a>
            
            @if($course->is_certification && $enrollment)
                <a href="{{ route('certificate', $enrollment) }}" class="px-4 bg-amber-100 text-amber-600 rounded-xl flex items-center justify-center hover:bg-amber-200 transition-colors">
                    <i class="fa-solid fa-download"></i>
                </a>
            @endif
        </div>
    </div>
</div>