danak-website/src/components/Pagination.tsx

'use client'
import React from "react";

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

const Pagination: React.FC<PaginationProps> = ({
    currentPage,
    totalPages,
    onPageChange,
}) => {
    const getPageNumbers = () => {
        const pageNumbers: (number | string)[] = [];
        const maxVisiblePages = 5; // تعداد حداکثری صفحات قابل مشاهده

        if (totalPages <= maxVisiblePages) {
            for (let i = 1; i <= totalPages; i++) {
                pageNumbers.push(i);
            }
        } else {
            if (currentPage > 3) {
                pageNumbers.push(1);
                if (currentPage > 4) {
                    pageNumbers.push("...");
                }
            }

            const start = Math.max(2, currentPage - 1);
            const end = Math.min(totalPages - 1, currentPage + 1);

            for (let i = start; i <= end; i++) {
                pageNumbers.push(i);
            }

            if (currentPage < totalPages - 2) {
                if (currentPage < totalPages - 3) {
                    pageNumbers.push("...");
                }
                pageNumbers.push(totalPages);
            }
        }

        return pageNumbers;
    };

    const pageNumbers = getPageNumbers();

    return (
        <div className="flex gap-2 text-xs justify-center items-center space-x-2 mt-4">
            {/* دکمه قبلی */}
            {/* <button
                className={`px-3 py-1 rounded-md ${currentPage === 1
                        ? "text-gray-400 cursor-not-allowed"
                        : "text-blue-600 hover:bg-gray-100"
                    }`}
                onClick={() => currentPage > 1 && onPageChange(currentPage - 1)}
                disabled={currentPage === 1}
            >
                قبلی
            </button> */}

            {/* شماره صفحات */}
            {pageNumbers.map((page, index) =>
                typeof page === "number" ? (
                    <button
                        key={index}
                        className={`size-8 rounded-md ${currentPage === page
                            ? "bg-primary text-white"
                            : "text-primary bg-[#EAECF5] hover:bg-gray-100"
                            }`}
                        onClick={() => onPageChange(page)}
                    >
                        {page}
                    </button>
                ) : (
                    <span key={index} className="px-3 py-1 text-gray-500">
                        {page}
                    </span>
                )
            )}

            {/* دکمه بعدی */}
            {/* <button
                className={`px-3 py-1 rounded-md ${currentPage === totalPages
                        ? "text-gray-400 cursor-not-allowed"
                        : "text-blue-600 hover:bg-gray-100"
                    }`}
                onClick={() => currentPage < totalPages && onPageChange(currentPage + 1)}
                disabled={currentPage === totalPages}
            >
                بعدی
            </button> */}
        </div>
    );
};

export default Pagination;