/**
 * External dependencies.
 */
import { TextControl } from '@wordpress/components';
import { __ } from '@wordpress/i18n';

/**
 * Renders a text input control for entering a request parameter name.
 *
 * Allows users to input a parameter name to retrieve dynamic content and updates the
 * dynamic content settings with the entered value.
 *
 * @since x.x.x
 *
 * @param {Object}   props               - The component props.
 * @param {Object}   props.settings      - The dynamic content settings from the context.
 * @param {Function} props.updateSetting - Function to update settings in the context.
 * @return {Element} The request parameter input control.
 */
const RequestParameterField = ( { settings, updateSetting } ) => (
	<TextControl
		label={ __( 'Parameter Name', 'spectra-pro' ) }
		value={ settings.source?.requestParamKey || '' }
		onChange={ ( newValue ) => updateSetting( 'source.requestParamKey', newValue ) }
		help={ __( 'Enter the name of the parameter to retrieve', 'spectra-pro' ) }
	/>
);

export default RequestParameterField;
