@props(['post'])

<article
    class="bg-white rounded-xl overflow-hidden shadow-sm hover:shadow-md transition-shadow duration-300 group">
    {{-- Image --}}
    <a href="{{ route('blog.show', ['slug' => $post->slug]) }}" class="block">
        @if($post->featured_image)
            <div class="h-48 overflow-hidden">
                <img src="{{ asset('storage/' . $post->featured_image) }}" alt="{{ $post->title }}"
                    class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
                    loading="lazy" />
            </div>
        @else
            <div class="h-48 bg-umami-light flex items-center justify-center">
                <svg class="w-12 h-12 text-umami-gray" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
                        d="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9a2 2 0 00-2-2h-2m-4-3H9M7 16h6M7 8h6v4H7V8z" />
                </svg>
            </div>
        @endif
    </a>

    {{-- Content --}}
    <div class="p-6">
        @if($post->category)
            <a href="{{ route('blog.category', ['slug' => $post->category->slug]) }}"
                class="text-xs font-semibold text-umami-accent uppercase tracking-wider hover:underline">
                {{ $post->category->name }}
            </a>
        @endif

        <h3 class="text-lg font-bold text-umami-dark mt-2 mb-2 line-clamp-2">
            <a href="{{ route('blog.show', ['slug' => $post->slug]) }}"
                class="hover:text-umami-accent transition-colors">
                {{ $post->title }}
            </a>
        </h3>

        <p class="text-umami-text text-sm line-clamp-3 mb-4">
            {{ $post->excerpt_or_truncated }}
        </p>

        <div class="flex items-center justify-between text-xs text-umami-gray">
            <div class="flex items-center gap-2">
                <span>{{ $post->author->name ?? 'Umami Beer' }}</span>
                <span>&middot;</span>
                <span>{{ $post->formatted_date }}</span>
            </div>
            <span>{{ $post->reading_time_text }}</span>
        </div>
    </div>
</article>