'use client'
import { FC } from 'react'
import { ArrowLeft2, ArrowRight2 } from 'iconsax-react'

interface Props {
    currentPage: number
    totalPages: number
    onPageChange: (page: number) => void
}

const Pagination: FC<Props> = ({ currentPage, totalPages, onPageChange }) => {
    const getVisiblePages = () => {
        const delta = 2
        const range = []
        const rangeWithDots = []

        for (
            let i = Math.max(2, currentPage - delta);
            i <= Math.min(totalPages - 1, currentPage + delta);
            i++
        ) {
            range.push(i)
        }

        if (currentPage - delta > 2) {
            rangeWithDots.push(1, '...')
        } else {
            rangeWithDots.push(1)
        }

        rangeWithDots.push(...range)

        if (currentPage + delta < totalPages - 1) {
            rangeWithDots.push('...', totalPages)
        } else if (totalPages > 1) {
            rangeWithDots.push(totalPages)
        }

        return rangeWithDots
    }

    const visiblePages = getVisiblePages()

    if (totalPages <= 1) return null

    return (
        <div className='flex items-center justify-center gap-2 mt-8'>
            {/* دکمه قبلی */}
            <button
                onClick={() => onPageChange(currentPage - 1)}
                disabled={currentPage === 1}
                className='flex items-center justify-center w-10 h-10 rounded-lg border border-gray-300 hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed transition-colors'
            >
                <ArrowRight2 size={16} />
            </button>

            {/* شماره صفحات */}
            <div className='flex items-center gap-2'>
                {visiblePages.map((page, index) => (
                    <div key={index}>
                        {page === '...' ? (
                            <span className='px-3 py-2 text-gray-500'>...</span>
                        ) : (
                            <button
                                onClick={() => onPageChange(page as number)}
                                className={`w-10 h-10 rounded-lg text-sm font-medium transition-colors ${currentPage === page
                                    ? 'bg-primary text-white'
                                    : 'border border-gray-300 text-gray-700 hover:bg-gray-50'
                                    }`}
                            >
                                {page}
                            </button>
                        )}
                    </div>
                ))}
            </div>

            {/* دکمه بعدی */}
            <button
                onClick={() => onPageChange(currentPage + 1)}
                disabled={currentPage === totalPages}
                className='flex items-center justify-center w-10 h-10 rounded-lg border border-gray-300 hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed transition-colors'
            >
                <ArrowLeft2 size={16} />
            </button>
        </div>
    )
}

export default Pagination
