@props(['posts' => collect()])

@if($posts->count())
  <div class="bg-white rounded-lg shadow p-4">
    <h3 class="font-semibold mb-3 text-[var(--brand)]">الأكثر رواجاً</h3>
    <ul class="space-y-3">
      @foreach($posts as $post)
        <li class="border-b pb-2 last:border-none">
          <a href="{{ route('post.show', $post->slug) }}" class="block hover:text-[var(--brand)]">
            <div class="font-semibold text-sm">{{ $post->title }}</div>
            <div class="text-xs text-gray-500 mt-1">{{ optional($post->published_at)->format('Y/m/d') }}</div>
          </a>
        </li>
      @endforeach
    </ul>
  </div>
@endif