@props(['post'])

<article class="group">
    @if($post->featured_image_media_id)
        <a href="{{ route('posts.show', $post->slug) }}" class="block overflow-hidden rounded-lg mb-4">
            <img src="{{ $post->getFirstMediaUrl('featured', 'card') }}" alt="{{ $post->title }}" class="w-full aspect-video object-cover group-hover:scale-105 transition-transform duration-300">
        </a>
    @endif

    <div class="flex items-center gap-2 text-xs font-sans text-stone-500 dark:text-stone-500 mb-2 uppercase tracking-wide">
        @if($post->categories->isNotEmpty())
            <a href="{{ route('categories.show', $post->categories->first()->slug) }}" class="hover:text-stone-900 dark:hover:text-stone-100">
                {{ $post->categories->first()->name }}
            </a>
            <span>·</span>
        @endif
        <time datetime="{{ $post->published_at?->toISOString() }}">{{ $post->published_at?->format('M j, Y') }}</time>
    </div>

    <h2 class="font-display text-2xl font-bold text-stone-900 dark:text-stone-100 leading-tight mb-2">
        <a href="{{ route('posts.show', $post->slug) }}" class="hover:text-amber-700 dark:hover:text-amber-500 transition">
            {{ $post->title }}
        </a>
    </h2>

    @if($post->excerpt)
        <p class="text-stone-600 dark:text-stone-400 leading-relaxed mb-3 line-clamp-3">{!! $post->excerpt !!}</p>
    @endif

    <div class="flex items-center gap-3 text-sm font-sans text-stone-500 dark:text-stone-500">
        <span>{{ $post->user->name }}</span>
        <span>·</span>
        <span>{{ $post->reading_time_minutes ?? 0 }} min read</span>
    </div>
</article>