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

/**
 * Minimum allowed value for the offset.
 *
 * @type {number}
 */
const MIN_OFFSET = 0;

/**
 * Maximum allowed value for the offset.
 *
 * @type {number}
 */
const MAX_OFFSET = 100;

/**
 * A control component for setting the offset of posts in a query.
 *
 * This component renders a number input field that allows users to specify
 * how many posts to skip (offset) in the query results. The value is constrained
 * between `MIN_OFFSET` (0) and `MAX_OFFSET` (100). When a valid value is entered,
 * it updates the query via the provided `onChange` callback.
 *
 * @since x.x.x
 *
 * @param {Object}   props          The component props.
 * @param {number}   props.offset   The current offset value in the query. Defaults to 0.
 * @param {Function} props.onChange Callback function to update the offset value in the query.
 * @return {Element} The rendered NumberControl component.
 */
export const OffsetControl = ( props ) => {
	const { offset = 0, onChange } = props;
	return (
		<NumberControl
			__next40pxDefaultSize
			label={ __( 'Offset', 'spectra-pro' ) }
			value={ offset }
			min={ MIN_OFFSET }
			onChange={ ( newOffset ) => {
				if (
					isNaN( newOffset ) ||
					newOffset < MIN_OFFSET ||
					newOffset > MAX_OFFSET
				) {
					return;
				}
				onChange( { offset: newOffset } );
			} }
		/>
	);
};

export default OffsetControl;
