/**
 * Floating save / status toast for Blockora Morph editors.
 */
import { createPortal } from '@wordpress/element';

export default function FloatingToast( {
	message,
	visible = false,
	variant = 'success',
} ) {
	if ( ! visible || ! message ) {
		return null;
	}

	const node = (
		<div
			className={ `bm-floating-toast bm-floating-toast--${ variant }` }
			role="status"
			aria-live="polite"
		>
			<span
				className={
					variant === 'success'
						? 'dashicons dashicons-yes-alt'
						: 'dashicons dashicons-warning'
				}
				aria-hidden="true"
			/>
			<span className="bm-floating-toast__text">{ message }</span>
		</div>
	);

	if ( typeof document === 'undefined' || ! document.body ) {
		return node;
	}

	return createPortal( node, document.body );
}
