import { __, sprintf } from '@wordpress/i18n';
import type { JSX } from 'react';
import { Button } from '../../shared/ui/Button';

type HistoryPagerProps = {
	page: number;
	pageCount: number;
	onPageChange: ( page: number ) => void;
};

export function HistoryPager( {
	page,
	pageCount,
	onPageChange,
}: HistoryPagerProps ): JSX.Element {
	return (
		<div className="list-foot num">
			<span>
				{ sprintf(
					/* translators: 1: current page, 2: number of pages */
					__( 'Page %1$s of %2$s', 'aiplaz-link-checkup' ),
					String( page ),
					String( pageCount )
				) }
			</span>
			<span className="pager">
				<Button
					variant="quiet"
					size="sm"
					disabled={ page <= 1 }
					onClick={ () => {
						onPageChange( page - 1 );
					} }
				>
					{ __( 'Previous', 'aiplaz-link-checkup' ) }
				</Button>
				<Button
					variant="quiet"
					size="sm"
					disabled={ page >= pageCount }
					onClick={ () => {
						onPageChange( page + 1 );
					} }
				>
					{ __( 'Next', 'aiplaz-link-checkup' ) }
				</Button>
			</span>
		</div>
	);
}