'use client'

import React from 'react'

interface PaginationProps {
  currentPage: number
  totalPages: number
  hasNext: boolean
  hasPrevious: boolean
  isLoading: boolean
  onPageChange: (page: number) => void
}

export default function Pagination({
  currentPage,
  totalPages,
  isLoading,
  onPageChange,
}: PaginationProps) {
  if (totalPages <= 1) return null

  const renderPageNumbers = () => {
    const pages = []
    const maxVisiblePages = 5 // максимальное количество видимых страниц

    // создаем кнопки страницы
    const createPageButton = (pageNum: number) => (
      <button
        key={pageNum}
        onClick={() => onPageChange(pageNum)}
        disabled={isLoading || pageNum === currentPage}
        className={`h-8 w-8 rounded-full ${
          pageNum === currentPage
            ? 'bg-orange/80 text-white'
            : 'bg-white text-gray-700 hover:bg-gray-100'
        } flex items-center justify-center border text-sm font-medium transition-colors`}
      >
        {pageNum}
      </button>
    )

    // всегда показываем первую страницу
    pages.push(createPageButton(1))

    if (totalPages <= maxVisiblePages) {
      // если страниц мало, показываем все
      for (let i = 2; i <= totalPages; i++) {
        pages.push(createPageButton(i))
      }
    } else {
      // если страниц много, показываем с многоточием
      if (currentPage > 3) {
        pages.push(
          <span key="start-ellipsis" className="px-2">
            ...
          </span>
        )
      }

      // показываем страницы вокруг текущей
      for (
        let i = Math.max(2, currentPage - 1);
        i <= Math.min(totalPages - 1, currentPage + 1);
        i++
      ) {
        pages.push(createPageButton(i))
      }

      if (currentPage < totalPages - 2) {
        pages.push(
          <span key="end-ellipsis" className="px-2">
            ...
          </span>
        )
      }

      // всегда показываем последнюю страницу
      if (totalPages > 1) {
        pages.push(createPageButton(totalPages))
      }
    }

    return pages
  }

  return (
    <div className="mt-6 flex items-center justify-center">
      <div className="flex space-x-2">{renderPageNumbers()}</div>
    </div>
  )
}