@props(['post'])

{{-- Article sans cadre : image, surtitre, titre, chapô, comme une brève de magazine. --}}
<article class="group flex h-full flex-col">
    <a href="{{ route('site.blog.show', $post) }}" class="flex flex-1 flex-col">
        @if ($post->cover_path)
            <div class="media aspect-3/2">
                <img
                    src="{{ Storage::disk('public')->url($post->cover_path) }}"
                    alt="{{ $post->title }}"
                    loading="lazy"
                    class="size-full object-cover transition-transform duration-700 group-hover:scale-[1.03]"
                >
            </div>
        @endif

        <div @class(['flex flex-1 flex-col', 'mt-6' => (bool) $post->cover_path])>
            @if ($post->category)
                <p class="kicker">{{ $post->category->name }}</p>
            @endif

            <h3 @class(['display-card', 'mt-3' => (bool) $post->category])>{{ $post->title }}</h3>

            <p class="mt-3 flex-1 text-sm leading-relaxed text-ink-muted">{{ $post->summary() }}</p>

            <p class="mt-5 flex flex-wrap items-center gap-x-2.5 text-xs text-ink-subtle">
                @if ($post->published_at)
                    <time datetime="{{ $post->published_at->toDateString() }}">
                        {{ $post->published_at->translatedFormat('j F Y') }}
                    </time>
                    <span aria-hidden="true">·</span>
                @endif

                <span>{{ $post->readingMinutes() }} min de lecture</span>
            </p>
        </div>
    </a>
</article>