@props(['post'])

@php
    $image = $post->featuredImageUrl();
@endphp

<a href="{{ route('blog.show', $post->slug) }}" class="blog-card group">
    <div class="blog-card__media">
        @if($image)
            <img
                src="{{ $image }}"
                alt="{{ $post->featuredImage?->alt_text ?: $post->title }}"
                width="640"
                height="360"
                class="blog-card__image"
                loading="lazy"
                decoding="async"
            >
        @else
            <div class="blog-card__placeholder" aria-hidden="true">
                <span>{{ strtoupper(substr($post->title, 0, 1)) }}</span>
            </div>
        @endif
    </div>

    <div class="blog-card__body">
        <div class="blog-card__meta">
            @if($post->category)
                <span class="blog-card__category">{{ $post->category->name }}</span>
            @endif
            @if($post->published_at)
                <time class="blog-card__date" datetime="{{ $post->published_at->toIso8601String() }}">
                    {{ $post->published_at->format('M j, Y') }}
                </time>
            @endif
            <span class="blog-card__reading">{{ $post->readingTimeMinutes() }} min read</span>
        </div>

        <h2 class="blog-card__title">{{ $post->title }}</h2>

        @if($post->excerpt)
            <p class="blog-card__excerpt">{{ $post->excerpt }}</p>
        @endif

        <span class="blog-card__action">Read article →</span>
    </div>
</a>