/**
 * External dependencies.
 */
import { useBlockProps } from '@wordpress/block-editor';
import { memo } from '@wordpress/element';
import { __ } from '@wordpress/i18n';

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

/**
 * The Editor Block render.
 *
 * @param {Object} props The element props.
 * @since x.x.x
 * @return {Element} The rendered block.
 */
const Render = ( props ) => {
	const {
		context: { 'spectra-pro/loop-builder-child-filter/filterType': filterType },
		attributes,
	} = props;

	const { text } = attributes;

	// Configuration for the useSpectraStyles hook.
	const config = [
		{ key: 'textColor' },
		{ key: 'textColorActive' },
		{ key: 'textColorHover' },
		{ key: 'backgroundColor' },
		{ key: 'backgroundColorActive' },
		{ key: 'backgroundColorHover' },
		{ key: 'backgroundGradient' },
		{ key: 'backgroundGradientActive' },
		{ key: 'backgroundGradientHover' },
	];

	// Additional classes.
	const additionalClasses = [ 'wp-block-button', 'wp-block-button__link', 'button' !== filterType && 'is-hidden' ];

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

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

	return (
		<div { ...blockProps }>
			<div className="spectra-button__link">{ text || __( 'All', 'spectra-pro' ) }</div>
		</div>
	);
};

export default memo( Render );
