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

/**
 * External dependencies.
 */
import DynamicContentButton from '@spectra-pro-extensions/dynamic-content/components/DynamicContentButton';
import { DynamicContentProvider } from '@spectra-pro-extensions/dynamic-content/context/DynamicContentContext';
import { DYNAMIC_CONTENT_ATTR } from '@spectra-pro-extensions/dynamic-content/utils/constants';

/**
 * Dynamic Content Format configuration for rich text editing.
 *
 * @since x.x.x
 *
 * @constant {Object}
 */
const DynamicContentFormat = {
	title: __( 'Dynamic Content', 'spectra-pro' ),
	tagName: 'span',
	className: 'spectra-pro-dc-content',
	attributes: {
		'data-spectra-dc': DYNAMIC_CONTENT_ATTR,
	},
	/**
	 * React component to render the dynamic content format in the editor.
	 *
	 * @param {Object} props - The props to pass to the `DynamicContentButton` component.
	 *
	 * @return {Element} The rendered component.
	 */
	edit: ( props ) => (
		<DynamicContentProvider>
			<DynamicContentButton { ...props } />
		</DynamicContentProvider>
	),
};

export default DynamicContentFormat;
