import { TextControl } from '@wordpress/components';
import { __ } from '@wordpress/i18n';

/**
 * Renders controls for configuring comments number display.
 *
 * @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 comments number configuration controls.
 */
const CommentsNumberField = ( { settings, updateSetting } ) => (
	<>
		{ /* Text input for no comments text */ }
		<TextControl
			label={ __( 'No Responses', 'spectra-pro' ) }
			value={ settings.source.noComments }
			onChange={ ( value ) => updateSetting( 'source.noComments', value ) }
		/>
		{ /* Text input for one comment text */ }
		<TextControl
			label={ __( 'One Response', 'spectra-pro' ) }
			value={ settings.source.oneComment }
			onChange={ ( value ) => updateSetting( 'source.oneComment', value ) }
		/>
		{ /* Text input for multiple comments text */ }
		<TextControl
			label={ __( '{number} Responses', 'spectra-pro' ) }
			value={ settings.source.manyComments }
			onChange={ ( value ) => updateSetting( 'source.manyComments', value ) }
		/>
	</>
);

export default CommentsNumberField;
