@props(['post'])

{{-- Blog post summary card, shared by the Blog page grid and the home "Latest Articles" section. --}}
<article {{ $attributes->class('group flex flex-col bg-surface-container-lowest rounded-xl border border-outline-variant shadow-sm overflow-hidden hover:border-primary transition-colors') }}>
    <a href="{{ route('blog.show', $post) }}" wire:navigate class="block relative aspect-[16/9] bg-surface-container-high">
        @if ($post->coverUrl())
            <x-media-image :src="$post->coverUrl()" :alt="$post->translate('title')" class="absolute inset-0"
                img-class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
        @else
            <div class="absolute inset-0 flex items-center justify-center bg-gradient-to-br from-primary to-primary-container text-secondary-container">
                <span class="material-symbols-outlined" style="font-size: 56px">article</span>
            </div>
        @endif
    </a>

    <div class="flex flex-col flex-1 p-6">
        <div class="flex flex-wrap items-center gap-x-3 gap-y-1 mb-3 text-caption text-on-surface-variant">
            @if ($post->category)
                <span class="uppercase tracking-widest text-[10px] font-bold text-primary">{{ $post->category->translate('name') }}</span>
            @endif
            <time datetime="{{ $post->published_at?->toDateString() }}">{{ $post->published_at?->translatedFormat('j M Y') }}</time>
            <span>{{ __(':minutes min read', ['minutes' => $post->readingMinutes()]) }}</span>
        </div>

        <h3 class="font-headline-md text-headline-md text-primary leading-snug mb-3">
            <a href="{{ route('blog.show', $post) }}" wire:navigate class="hover:underline">{{ $post->translate('title') }}</a>
        </h3>

        <p class="text-body-md text-on-surface-variant flex-1">{{ $post->excerptText() }}</p>

        <a href="{{ route('blog.show', $post) }}" wire:navigate
            class="mt-5 inline-flex items-center text-primary font-label-md text-label-md group/link">
            {{ __('Read more') }}
            <span class="material-symbols-outlined ms-1 text-sm group-hover/link:translate-x-1 transition-transform rtl:rotate-180">arrow_forward</span>
        </a>
    </div>
</article>