@props([
    'thumbIcon' => null,
    'thumbImageUrl' => null,
    'tag' => '',
    'type' => '',
    'title' => '',
    'description' => '',
    'link' => null,
    'bgGradient' => 'from-dark to-gray',
])

<div {{ $attributes->merge(['class' => 'group bg-dark/80 backdrop-blur-md border border-gray-light/20 rounded-2xl overflow-hidden transition-all duration-300 hover:-translate-y-2 hover:border-primary/40 hover:shadow-glow']) }}>
    {{-- الصورة المصغرة --}}
    <div class="relative h-52 bg-gradient-to-br {{ $bgGradient }} flex items-center justify-center overflow-hidden">
        @if($thumbImageUrl)
            <img src="{{ $thumbImageUrl }}" alt="{{ $title }}" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300">
        @elseif($thumbIcon)
            <div class="text-6xl text-primary/30 group-hover:text-primary/50 group-hover:scale-110 transition-all duration-300">
                {{ $thumbIcon }}
            </div>
        @else
            <div class="text-6xl text-primary/30">📁</div>
        @endif
        {{-- وسم --}}
        @if($tag)
            <div class="absolute top-4 right-4 bg-primary/90 text-dark text-xs font-bold px-3 py-1 rounded-md">
                {{ $tag }}
            </div>
        @endif
    </div>
    {{-- محتوى البطاقة --}}
    <div class="p-6">
        @if($type)
            <div class="text-primary text-xs font-mono uppercase tracking-wider mb-2">{{ $type }}</div>
        @endif
        <h3 class="text-lg font-bold text-white mb-2">{{ $title }}</h3>
        <p class="text-gray-light text-sm leading-relaxed mb-5">{{ $description }}</p>
        @if($link)
            <a href="{{ $link }}" class="inline-flex items-center gap-2 text-white text-sm font-semibold px-4 py-2 rounded-lg border border-gray-light/30 hover:bg-primary/15 hover:border-primary transition-all duration-200">
                عرض التفاصيل
                <span>←</span>
            </a>
        @endif
    </div>
</div>