'use client'

import { ChevronLeft, ChevronRight } from 'lucide-react'

interface PaginationProps {
  currentPage: number
  totalPages: number
  onPageChange: (page: number) => void
  siblingCount?: number
}

export default function Pagination({ currentPage, totalPages, onPageChange, siblingCount = 1 }: PaginationProps) {
  const getPageNumbers = () => {
    const pages: (number | string)[] = []
    const totalPageNumbers = siblingCount * 2 + 3
    const leftSiblingIndex = Math.max(currentPage - siblingCount, 1)
    const rightSiblingIndex = Math.min(currentPage + siblingCount, totalPages)
    const shouldShowLeftDots = leftSiblingIndex > 2
    const shouldShowRightDots = rightSiblingIndex < totalPages - 1

    if (totalPages <= totalPageNumbers) {
      for (let i = 1; i <= totalPages; i++) pages.push(i)
    } else {
      if (shouldShowLeftDots) {
        pages.push(1, '...')
        for (let i = leftSiblingIndex; i <= rightSiblingIndex; i++) pages.push(i)
        if (shouldShowRightDots) pages.push('...', totalPages)
      } else {
        for (let i = 1; i <= rightSiblingIndex + 1; i++) pages.push(i)
        if (shouldShowRightDots) pages.push('...', totalPages)
      }
    }
    return pages
  }

  if (totalPages <= 1) return null

  return (
    <div className="flex justify-center mt-12">
      <div className="flex items-center gap-2">
        <button
          onClick={() => onPageChange(currentPage - 1)}
          disabled={currentPage === 1}
          className={`p-2 rounded-lg border transition ${
            currentPage === 1
              ? 'border-gray-200 text-gray-300 cursor-not-allowed'
              : 'border-gray-200 text-dark hover:border-primary hover:text-primary'
          }`}
        >
          <ChevronLeft size={18} />
        </button>

        {getPageNumbers().map((page, index) => (
          <button
            key={index}
            onClick={() => typeof page === 'number' && onPageChange(page)}
            className={`w-10 h-10 rounded-lg font-medium transition ${
              currentPage === page
                ? 'bg-gradient-primary text-white'
                : typeof page === 'number'
                ? 'text-dark hover:border-primary hover:text-primary border border-gray-200'
                : 'text-gray-400 cursor-default'
            }`}
            disabled={typeof page !== 'number'}
          >
            {page}
          </button>
        ))}

        <button
          onClick={() => onPageChange(currentPage + 1)}
          disabled={currentPage === totalPages}
          className={`p-2 rounded-lg border transition ${
            currentPage === totalPages
              ? 'border-gray-200 text-gray-300 cursor-not-allowed'
              : 'border-gray-200 text-dark hover:border-primary hover:text-primary'
          }`}
        >
          <ChevronRight size={18} />
        </button>
      </div>
    </div>
  )
}