/**
 * Hero block — inspector + server-side preview.
 */
import { InspectorControls, useBlockProps } from '@wordpress/block-editor';
import ServerSideRender from '@wordpress/server-side-render';
import { Spinner } from '@wordpress/components';
import { __ } from '@wordpress/i18n';

import HeroInspector from './hero-inspector';
import './editor.scss';

export default function Edit({ attributes, setAttributes }) {
	const props = useBlockProps({
		className: 'movie-engine-hero-block-editor',
	});

	return (
		<>
			<InspectorControls>
				<HeroInspector attributes={attributes} setAttributes={setAttributes} />
			</InspectorControls>
			<div {...props}>
				<div className="movie-engine-hero-block-editor__preview movie-engine-plugin">
					<ServerSideRender
						block="cine-movie-engine/hero"
						attributes={attributes}
						LoadingResponsePlaceholder={() => (
							<p className="movie-engine-hero-block-editor__preview-loading">
								<Spinner />
								{__('Loading preview…', 'cine-movie-engine')}
							</p>
						)}
						ErrorResponsePlaceholder={() => (
							<p className="movie-engine-hero-block-editor__preview-loading">
								{__(
									'Preview unavailable. Check the front end or try saving the page.',
									'cine-movie-engine'
								)}
							</p>
						)}
					/>
				</div>
			</div>
		</>
	);
}
