interface PaginationProps {
currentPage: number;
totalPages: number;
total: number;
hasPrev: boolean;
hasNext: boolean;
onPrev: () => void;
onNext: () => void;
label?: string;
}
export function Pagination({
currentPage,
totalPages,
total,
hasPrev,
hasNext,
onPrev,
onNext,
label = 'results',
}: PaginationProps) {
if (totalPages <= 1) {
return (
<div className="page-info" style={{ textAlign: 'center', marginTop: 15, color: '#6b7280' }}>
{total} {label}
</div>
);
}
return (
<div className="pagination">
<button className="btn-small" onClick={onPrev} disabled={!hasPrev}>
← Prev
</button>
<span className="page-info">
Page {currentPage} of {totalPages} ({total} {label})
</span>
<button className="btn-small" onClick={onNext} disabled={!hasNext}>
Next →
</button>
</div>
);
}