@props([
    'post' => null,
    'skeleton' => false,
])

<article class="bg-gray-50 transition-colors">
  @if ($skeleton)
    <div class="flex gap-3">
      {{-- Skeleton loader --}}
      <div class="flex-shrink-0">
        <div class="h-full w-20 animate-pulse bg-gray-200"></div>
      </div>
      <div class="min-w-0 flex-1 py-3 pr-3">
        <div class="mb-1 h-4 animate-pulse rounded bg-gray-200"></div>
        <div class="mb-1 h-3 w-3/4 animate-pulse rounded bg-gray-200"></div>
        <div class="mb-2 h-5 w-16 animate-pulse rounded-full bg-gray-200"></div>
      </div>
    </div>
  @else
    {{-- Post real --}}
    {{-- Imagen del post --}}
    <a href="{{ route('blog.show', $post->slug) }}" class="flex gap-3">
      <div class="flex flex-shrink-0 border border-gray-50">
        <img src="{{ $post->thumbnail_image_url ?? $post->hero_image_url ?? $post->hero_placeholder }}" alt="{{ $post->title }}" class="aspect-square w-full max-w-20 object-cover">
      </div>
      {{-- Contenido del post --}}
      <div class="min-w-0 flex-1 py-3 pr-3">
        @if ($post->categories->isNotEmpty())
          @php
            $randomCategory = $post->categories->random();
          @endphp
          <span class="text-primary block text-xs leading-tight">
            {!! $randomCategory->name !!}
          </span>
        @endif
        {{-- Título del post --}}
        <h3 class="text-primary-blue-variant line-clamp-2 text-sm font-semibold leading-tight">
          <span href="{{ route('blog.show', $post->slug) }}" class="hover:text-primary/80 transition-colors">
            {!! Str::limit($post->title, 80) !!}
          </span>
        </h3>
      </div>
    </a>
  @endif
</article>