import { useBlockProps } from '@wordpress/block-editor';
import { InnerBlocks } from '@wordpress/block-editor';

export default function save({ attributes }) {
	const { coverUrl, coverId, coverAlt, focusBullets } =
		attributes;
	const renderedFocusObjects = focusBullets.map(
		(focusBullet, index) => {
			return (
				<div
					data-focus-bullet-title={focusBullet.title}
					className="lhoist-blocks-focus-object"
					aria-hidden="true"
					style={{
						top: `${focusBullet.y * 100}%`,
						left: `${focusBullet.x * 100}%`,
					}}
					data-postion-x={focusBullet.x * 100}
					data-postion-y={focusBullet.y * 100}
				>
					<span className="lhoist-blocks-focus-object__index">
						{index + 1}
					</span>
				</div>
			);
		}
	);
	return (
		<section
			{...useBlockProps.save({
				className: `lhoist-blocks-search-and-find`,
			})}
		>
			{coverUrl && (
				<>
					<div className="lhoist-blocks-search-and-find__objects-container">
					<img
						className="lhoist-blocks-search-and-find__background_picture"
						src={coverUrl}
						alt={coverAlt}
					/>
						<InnerBlocks.Content />
					</div>
				</>
			)}
		</section>
	);
}