---
// Файл: src/components/reviews/ReviewsPagination.astro
// Логика передана клиенту (см. страницу reviews.astro)
---

<!-- Важно: id="pagination-container" -->
<div
  id="pagination-container"
  class="flex justify-center items-center gap-2 mb-16 hidden"
>
  <!-- Кнопка Назад -->
  <button
    id="prev-page-btn"
    class="w-10 h-10 rounded-xl bg-[var(--color-navy-dark)] border border-[var(--color-gray-600)]/20 flex items-center justify-center text-[var(--color-gray-400)] hover:border-[var(--color-gold)]/30 hover:text-[var(--color-white)] transition-all hover:cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed"
  >
    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path
        stroke-linecap="round"
        stroke-linejoin="round"
        stroke-width="2"
        d="M15 19l-7-7 7-7"></path>
    </svg>
  </button>

  <!-- Контейнер для динамических номеров страниц -->
  <div id="pagination-numbers" class="flex gap-2"></div>

  <!-- Кнопка Вперед -->
  <button
    id="next-page-btn"
    class="w-10 h-10 rounded-xl bg-[var(--color-navy-dark)] border border-[var(--color-gray-600)]/20 flex items-center justify-center text-[var(--color-gray-400)] hover:border-[var(--color-gold)]/30 hover:text-[var(--color-white)] transition-all hover:cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed"
  >
    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path
        stroke-linecap="round"
        stroke-linejoin="round"
        stroke-width="2"
        d="M9 5l7 7-7 7"></path>
    </svg>
  </button>
</div>
