/**
 * External dependencies
 */
import { InnerBlocks, useBlockProps } from '@wordpress/block-editor';
import { memo } from '@wordpress/element';

/**
 * Internal dependencies
 */
import { spectraClassNames } from '@spectra-helpers';
import { useSpectraStyles } from '@spectra-hooks';
import { TEMPLATE } from './template';

/**
 * The Editor Block render.
 *
 * @since x.x.x
 *
 * @param {Object} props The element props.
 * @return {Element} The rendered block.
 */
const Render = ( props ) => {
	const { attributes } = props;

	// Configuration for the useSpectraStyles hook.
	const config = [
		{ key: 'backgroundColorSecondary' },
		{ key: 'backgroundColorSecondaryHover' },
		{ key: 'backgroundGradientSecondary' },
		{ key: 'backgroundGradientSecondaryHover' },
	];

	// Generate styles and class names.
	const { style, classNames } = useSpectraStyles( attributes, config );

	// Use the block props, with the added CSS variables and their related classes.
	const blockProps = useBlockProps( {
		className: spectraClassNames( classNames ),
		style,
	} );

	return (
		<nav { ...blockProps }>
			<InnerBlocks
				template={ TEMPLATE }
				allowedBlocks={ [
					'spectra/loop-builder-child-pagination-previous-button',
					'spectra/loop-builder-child-pagination-page-numbers-button',
					'spectra/loop-builder-child-pagination-next-button',
				] }
				templateLock={ false }
			/>
		</nav>
	);
};

export default memo( Render );
