import { __ } from '@wordpress/i18n';
import { Inserter } from '@wordpress/block-editor';
import { Button } from '@wordpress/components';
import { plus } from '@wordpress/icons';

/**
 * A "+" inner-blocks appender.
 *
 * Replaces WordPress' oversized default ButtonBlockAppender circle with a clean,
 * page-builder style affordance that opens the block inserter for the given
 * parent block. Pass `iconOnly` for a compact "+" button (no visible label); the
 * label is still used as the accessible name.
 *
 * @param {Object}  props
 * @param {string}  props.rootClientId Parent block clientId to insert into.
 * @param {string}  props.label        Accessible name / visible label.
 * @param {boolean} [props.iconOnly]   Render only the "+" icon (no text).
 * @param {string}  [props.className]  Extra class for styling.
 */
export default function LabeledAppender( { rootClientId, label, iconOnly = false, className = '' } ) {
	const accessibleLabel = label || __( 'Add block', 'axcelersblocks' );

	return (
		<Inserter
			rootClientId={ rootClientId }
			isAppender
			renderToggle={ ( { onToggle, disabled } ) => (
				<Button
					className={ `axcelersblocks-appender ${ className }`.trim() }
					icon={ plus }
					onClick={ onToggle }
					disabled={ disabled }
					label={ iconOnly ? accessibleLabel : undefined }
					aria-label={ accessibleLabel }
					showTooltip={ iconOnly }
				>
					{ iconOnly ? null : accessibleLabel }
				</Button>
			) }
		/>
	);
}
