app/components/PageNavigator.js

"use client";

export default function PageNavigator({
    currentIndex,
    totalPages,
    currentPageNumber,
    hasMentions,
    onPrevious,
    onNext,
    onJumpToMention,
    hasNextMention,
    hasPrevMention,
}) {
    return (
        <div className="page-navigator">
            <div className="page-nav-group">
                <button
                    className="btn btn-nav btn-jump"
                    onClick={() => onJumpToMention(-1)}
                    disabled={!hasPrevMention}
                    aria-label="Previous page with mentions"
                    title="Jump to previous page with data mentions"
                >
                    ⏮
                </button>
                <button
                    className="btn btn-nav"
                    onClick={onPrevious}
                    disabled={currentIndex <= 0}
                    aria-label="Previous page"
                >
                    ← Prev
                </button>
            </div>

            <span className="page-indicator">
                Page <strong>{currentPageNumber !== null ? currentPageNumber + 1 : ''}</strong>
                {hasMentions && <span className="mention-dot" title="This page has data mentions">●</span>}
                <span className="page-count">{currentIndex + 1} / {totalPages}</span>
            </span>

            <div className="page-nav-group">
                <button
                    className="btn btn-nav"
                    onClick={onNext}
                    disabled={currentIndex >= totalPages - 1}
                    aria-label="Next page"
                >
                    Next →
                </button>
                <button
                    className="btn btn-nav btn-jump"
                    onClick={() => onJumpToMention(1)}
                    disabled={!hasNextMention}
                    aria-label="Next page with mentions"
                    title="Jump to next page with data mentions"
                >
                    ⏭
                </button>
            </div>
        </div>
    );
}