@props([
    'article',
])

<article class="card card-hover overflow-hidden group cursor-pointer">
    <div class="relative h-48 overflow-hidden bg-zinc-100 dark:bg-zinc-800">
        <img src="{{ $article['image'] }}" alt="{{ $article['title'] }}"
            class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105">
        <div class="absolute top-3 left-3">
            <span class="badge badge-{{ $article['badgeType'] ?? 'primary' }} shadow-md text-xs">
                {{ $article['badge'] }}
            </span>
        </div>
    </div>
    <div class="p-5">
        <div class="flex items-center gap-2 text-xs text-zinc-600 dark:text-zinc-400 mb-3">
            <span class="badge badge-{{ $article['categoryBadgeType'] ?? 'secondary' }} text-xs">
                {{ $article['category'] }}
            </span>
            <span>•</span>
            <time datetime="{{ $article['date'] }}">{{ $article['dateFormatted'] }}</time>
        </div>
        <h3 class="text-lg font-bold text-zinc-900 dark:text-zinc-100 mb-2 group-hover:text-[var(--color-primary)] transition-colors line-clamp-2">
            {{ $article['title'] }}
        </h3>
        <p class="text-sm text-zinc-700 dark:text-zinc-300 line-clamp-3 mb-4">
            {{ $article['teaser'] }}
        </p>
        @if(isset($article['author']))
            <div class="flex items-center gap-2 text-xs">
                <div class="w-6 h-6 rounded-full bg-gradient-to-br from-[var(--color-primary)] to-[var(--color-secondary)] flex items-center justify-center text-white font-semibold text-[10px]">
                    {{ $article['authorInitials'] }}
                </div>
                <span class="text-zinc-600 dark:text-zinc-400">{{ $article['author'] }}</span>
            </div>
        @endif
    </div>
</article>