dmenu-admin/src/components/Pagination.tsx

import React from "react";

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

const Pagination: React.FC<PaginationProps> = ({
    currentPage,
    totalPages,
    onPageChange,
}) => {
    // اگر فقط یک صفحه داریم، pagination نمایش داده نمی‌شود
    if (totalPages <= 1) return null;

    const getPageNumbers = () => {
        const pageNumbers: (number | string)[] = [];
        const maxVisiblePages = window.innerWidth < 768 ? 3 : 5; // تعداد کمتر برای موبایل

        if (totalPages <= maxVisiblePages) {
            for (let i = 1; i <= totalPages; i++) {
                pageNumbers.push(i);
            }
        } else {
            // نمایش صفحه اول
            pageNumbers.push(1);

            if (currentPage > 3) {
                pageNumbers.push("...");
            }

            // صفحات میانی
            const start = Math.max(2, Math.min(currentPage - 1, totalPages - 3));
            const end = Math.min(totalPages - 1, Math.max(currentPage + 1, 4));

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

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

            // نمایش صفحه آخر
            if (!pageNumbers.includes(totalPages)) {
                pageNumbers.push(totalPages);
            }
        }

        return pageNumbers;
    };

    const pageNumbers = getPageNumbers();

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

            {/* شماره صفحات */}
            <div className="flex gap-1">
                {pageNumbers.map((page, index) =>
                    typeof page === "number" ? (
                        <button
                            key={index}
                            className={`w-8 h-8 md:w-10 md:h-10 text-xs md:text-sm rounded-lg transition-colors ${currentPage === page
                                ? "bg-primary text-white shadow-sm"
                                : "text-gray-600 hover:bg-gray-100 hover:text-gray-800"
                                }`}
                            onClick={() => onPageChange(page)}
                        >
                            {page}
                        </button>
                    ) : (
                        <span key={index} className="flex items-center px-1 md:px-2 text-gray-400 text-xs md:text-sm">
                            {page}
                        </span>
                    )
                )}
            </div>

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

export default Pagination;