/**
 * Branded full-screen loader for editor / shortcode load gates.
 */
import { __ } from '@wordpress/i18n';
import { brandLogoUrl } from '../../shared/brandLogo';

/**
 * @param {object} props
 * @param {string} [props.label]
 * @param {string} [props.className]
 */
export default function BrandLoader( {
	label = __( 'Loading editor…', 'joc-blockora-morph' ),
	className = '',
} ) {
	const logo = brandLogoUrl();

	return (
		<div
			className={
				'bm-brand-loader' + ( className ? ` ${ className }` : '' )
			}
			role="status"
			aria-busy="true"
			aria-live="polite"
			aria-label={ label }
		>
			<div className="bm-brand-loader__atmosphere" aria-hidden="true" />
			<span className="bm-brand-loader__orb bm-brand-loader__orb--a" aria-hidden="true" />
			<span className="bm-brand-loader__orb bm-brand-loader__orb--b" aria-hidden="true" />

			<div className="bm-brand-loader__stage">
				<div className="bm-brand-loader__mark" aria-hidden="true">
					<span className="bm-brand-loader__ring bm-brand-loader__ring--1" />
					<span className="bm-brand-loader__ring bm-brand-loader__ring--2" />
					<span className="bm-brand-loader__ring bm-brand-loader__ring--3" />
					{ logo ? (
						<img
							className="bm-brand-loader__logo"
							src={ logo }
							alt=""
							width={ 96 }
							height={ 96 }
							decoding="async"
						/>
					) : (
						<span className="bm-brand-loader__logo-fallback">BM</span>
					) }
				</div>

				<p className="bm-brand-loader__brand">
					JOC Blockora{ ' ' }
					<span className="bm-brand-loader__brand-accent">Morph</span>
				</p>

				<p className="bm-brand-loader__label">
					{ label }
					<span className="bm-brand-loader__dots" aria-hidden="true">
						<span />
						<span />
						<span />
					</span>
				</p>
			</div>
		</div>
	);
}
