@props(['article'])

<article class="group cursor-pointer">
    <a href="{{ route('articles.show', $article->slug) }}" class="block">
        @if($article->featured_image)
            <div class="aspect-video overflow-hidden bg-gray-200 mb-3 relative">
                <img src="{{ asset('storage/' . $article->featured_image) }}" alt="{{ $article->title }}" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300" loading="lazy">
                @if($article->is_breaking)
                    <span class="absolute top-2 left-2 bg-red-600 text-white text-[10px] font-bold px-1.5 py-0.5 rounded uppercase tracking-wide">Breaking</span>
                @endif
                @if($article->is_featured)
                    <span class="absolute top-2 right-2 bg-amber-500 text-white text-[10px] font-bold px-1.5 py-0.5 rounded uppercase tracking-wide">Featured</span>
                @endif
                <span class="absolute bottom-2 right-2 bg-black/50 backdrop-blur-sm text-white text-[10px] font-medium px-1.5 py-0.5 rounded">{{ $article->calculateReadingTime() }} min read</span>
            </div>
        @else
            <div class="aspect-video overflow-hidden bg-gradient-to-br from-gray-900 to-gray-700 mb-3 flex items-center justify-center">
                <span class="text-white/50 text-3xl font-bold">{{ strtoupper(substr($article->title, 0, 2)) }}</span>
            </div>
        @endif
        <div class="space-y-2">
            @if($article->category)
                <span class="category-badge inline-block px-2 py-0.5 bg-gray-900 text-white text-xs font-semibold uppercase tracking-wide">
                    {{ $article->category->name }}
                </span>
            @endif
            <h3 class="text-lg font-bold text-gray-900 leading-snug group-hover:text-red-600 transition-colors line-clamp-2">{{ $article->title }}</h3>
            @if($article->excerpt)
                <p class="text-gray-600 text-sm leading-relaxed line-clamp-2">{{ $article->excerpt }}</p>
            @endif
            <div class="flex items-center gap-3 text-xs text-gray-500">
                @if($article->author)
                    <span class="font-medium text-gray-700">{{ $article->author->name }}</span>
                @endif
                <span>&middot;</span>
                <span>{{ $article->published_at?->format('d M Y') }}</span>
                @if($article->location)
                    <span>&middot;</span>
                    <span>{{ $article->location->name }}</span>
                @endif
            </div>
        </div>
    </a>
</article>