/**
 * External dependencies.
 */
import { Button, __experimentalHStack as HStack } from '@wordpress/components';
import { __ } from '@wordpress/i18n';

/**
 * Renders the footer for the dynamic content configuration panel.
 *
 * Displays buttons to apply or update dynamic content settings, and a remove button
 * when editing existing dynamic content. Handles loading states for the apply/update
 * action.
 *
 * @since x.x.x
 *
 * @param {Object}   props                           - The component props.
 * @param {boolean}  props.hasExistingDynamicContent - Whether the content has existing dynamic settings.
 * @param {boolean}  props.isLoading                 - Whether the apply/update action is in progress.
 * @param {Function} props.onRemove                  - Callback to remove dynamic content.
 * @param {Function} props.onApply                   - Callback to apply or update dynamic content.
 * @return {Element} The footer with action buttons.
 */
const DynamicContentFooter = ( { hasExistingDynamicContent, isLoading, onRemove, onApply } ) => {
	/**
	 * Determines the button label based on loading and existing content state.
	 *
	 * @return {string} The appropriate button label.
	 */
	const getButtonLabel = () => {
		if ( isLoading ) {
			return hasExistingDynamicContent ? __( 'Updating…', 'spectra-pro' ) : __( 'Applying…', 'spectra-pro' );
		}
		return hasExistingDynamicContent ? __( 'Update', 'spectra-pro' ) : __( 'Apply', 'spectra-pro' );
	};

	return (
		<HStack spacing={ 2 } justify="end" className="spectra-pro-dynamic-content-footer">
			{ hasExistingDynamicContent && (
				<Button variant="tertiary" onClick={ onRemove } disabled={ isLoading }>
					{ __( 'Remove', 'spectra-pro' ) }
				</Button>
			) }
			<Button variant="primary" onClick={ onApply } isBusy={ isLoading } disabled={ isLoading }>
				{ getButtonLabel() }
			</Button>
		</HStack>
	);
};

export default DynamicContentFooter;
