@props(['post'])

<div class="col-xl-4 col-lg-6 col-md-6 col-12 mb-4" data-aos="fade-up">
    <div class="blog__single__wraper h-100 d-flex flex-column justify-content-between shadow-sm rounded-4 overflow-hidden border">
        <div class="blog__single__img position-relative">
            <a href="{{ route('blogs.show', $post->slug) }}">
                <img loading="lazy" src="{{ asset($post->featured_image ?? 'img/blog/blog_1.png') }}" alt="{{ $post->title }}" class="w-100" style="height: 220px; object-fit: cover;">
            </a>
            <div class="position-absolute top-0 start-0 m-3">
                <span class="badge bg-secondary text-white text-uppercase px-3 py-2">{{ $post->category->name }}</span>
            </div>
        </div>
        <div class="blog__single__content p-4 d-flex flex-column flex-grow-1 justify-content-between">
            <div>
                <div class="blog__single__meta mb-2 text-muted small d-flex justify-content-between">
                    <span><i class="icofont-calendar text-primary me-1"></i> {{ $post->published_at ? $post->published_at->format('M d, Y') : 'Draft' }}</span>
                    <span><i class="icofont-eye text-primary me-1"></i> {{ $post->view_count }} Views</span>
                </div>
                <h5 class="fw-bold mb-2">
                    <a href="{{ route('blogs.show', $post->slug) }}" class="text-dark text-decoration-none">
                        {{ Str::limit($post->title, 65) }}
                    </a>
                </h5>
                <p class="text-muted small mb-3">
                    {{ Str::limit($post->excerpt, 110) }}
                </p>
            </div>
            <div class="pt-3 border-top d-flex align-items-center justify-content-between">
                <span class="small text-muted"><i class="icofont-user text-primary me-1"></i> {{ $post->author->name ?? 'AICDS Editorial' }}</span>
                <a href="{{ route('blogs.show', $post->slug) }}" class="text-primary fw-semibold text-decoration-none">
                    Read Article <i class="icofont-arrow-right"></i>
                </a>
            </div>
        </div>
    </div>
</div>