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

/**
 * Renders a textarea control for entering a shortcode for dynamic content.
 *
 * Allows users to input a shortcode (e.g., [spectra id='123']) and updates the dynamic
 * content settings with the entered value. Includes guidance on shortcode attribute formatting.
 *
 * @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 shortcode input control.
 */
const ShortcodeField = ( { settings, updateSetting } ) => (
	<TextareaControl
		__nextHasNoMarginBottom
		__next40pxDefaultSize
		label={ __( 'Shortcode', 'spectra-pro' ) }
		value={ settings.source.field || '' }
		placeholder={ __( 'Enter shortcode', 'spectra-pro' ) }
		onChange={ ( newValue ) => updateSetting( 'source.field', newValue ) }
		help={ __(
			"When adding a Shortcode, please use single quotes('') for shortcode attributes. Example format: [spectra id='123']",
			'spectra-pro'
		) }
	/>
);

export default ShortcodeField;
