@props(['post'])

<article class="blog-card reveal">
  <div class="blog-thumb">
    <img src="{{ $post->featured_image ? asset('storage/' . $post->featured_image) : 'https://images.unsplash.com/photo-1531482615713-2afd69097998?auto=format&fit=crop&w=600&q=80' }}" 
         alt="{{ $post->title }}" loading="lazy" width="600" height="340">
    @if($post->category)
      <span class="blog-category-badge">{{ $post->category->name }}</span>
    @endif
  </div>
  <div class="blog-body">
    <div class="blog-meta">
      <span><i class="far fa-calendar-alt"></i> {{ $post->published_at ? $post->published_at->format('M d, Y') : $post->created_at->format('M d, Y') }}</span>
      <span><i class="far fa-clock"></i> {{ $post->read_time }} min read</span>
    </div>
    <h3 class="blog-title">
      <a href="{{ route('blog.show', $post->slug) }}">{{ $post->title }}</a>
    </h3>
    <p class="blog-excerpt">{{ Str::limit($post->excerpt, 120) }}</p>
    <a href="{{ route('blog.show', $post->slug) }}" class="blog-read-more">
      Read Full Article <i class="fas fa-arrow-right"></i>
    </a>
  </div>
</article>