/**
 * External dependencies
 */
import { __experimentalNumberControl as NumberControl } from '@wordpress/components';
import { __ } from '@wordpress/i18n';

/**
 * A control component for setting the maximum number of pages to display in a query.
 *
 * This component renders a number input field that allows users to specify the maximum
 * number of pages to show in the query results. The value must be a non-negative number,
 * where 0 indicates no limit (all pages). The selected value is passed to the `onChange`
 * callback to update the query.
 *
 * @param {Object}   props          The component props.
 * @param {number}   props.pages    The current number of pages to show.
 * @param {Function} props.onChange Callback function to update the pages value in the query.
 * @return {Element} The rendered NumberControl component.
 */
export const PagesControl = ( { pages, onChange } ) => {
	return (
		<NumberControl
			__next40pxDefaultSize
			label={ __( 'Max pages to show', 'spectra-pro' ) }
			value={ pages }
			min={ 0 }
			onChange={ ( newPages ) => {
				if ( isNaN( newPages ) || newPages < 0 ) {
					return;
				}
				onChange( { pages: newPages } );
			} }
			help={ __(
				'Limit the pages you want to show, even if the query has more results. To show all pages use 0 (zero).',
				'spectra-pro'
			) }
		/>
	);
};

export default PagesControl;
