import React from 'react';

type ListingPaginationProps = {
    currentPage: number;
    lastPage: number;
    total: number;
    itemCount: number;
    onPageChange: (page: number) => void;
    className?: string;
};

export default function ListingPagination({
    currentPage,
    lastPage,
    total,
    itemCount,
    onPageChange,
    className = '',
}: ListingPaginationProps): JSX.Element {
    const safeCurrentPage = Math.max(1, currentPage || 1);
    const safeLastPage = Math.max(1, lastPage || 1);

    const changePage = (page: number) => {
        if (page < 1 || page > safeLastPage || page === safeCurrentPage) return;
        onPageChange(page);
    };

    return (
        <div className={`flex items-center justify-between mt-4 ${className}`.trim()}>
            <div className="text-sm text-gray-600">showing {itemCount} of {total} items</div>
            <div className="flex items-center gap-2">
                <button
                    type="button"
                    disabled={safeCurrentPage <= 1}
                    onClick={() => changePage(safeCurrentPage - 1)}
                    className="px-2 py-1 border rounded disabled:opacity-40 disabled:cursor-not-allowed"
                >
                    Prev
                </button>
                {Array.from({length: safeLastPage}).map((_, index) => {
                    const page = index + 1;
                    return (
                        <button
                            key={page}
                            type="button"
                            onClick={() => changePage(page)}
                            className={`px-2 py-1 border rounded ${page === safeCurrentPage ? 'bg-indigo-600 text-white' : ''}`}
                        >
                            {page}
                        </button>
                    );
                })}
                <button
                    type="button"
                    disabled={safeCurrentPage >= safeLastPage}
                    onClick={() => changePage(safeCurrentPage + 1)}
                    className="px-2 py-1 border rounded disabled:opacity-40 disabled:cursor-not-allowed"
                >
                    Next
                </button>
            </div>
        </div>
    );
}