import {
	useBlockProps,
	MediaPlaceholder,
	RichText,
	BlockControls,
	MediaReplaceFlow,
} from "@wordpress/block-editor";
import { InnerBlocks } from "@wordpress/block-editor";

export default function save({ attributes }) {
	const { coverUrl, coverId, coverAlt, focusBullets } = attributes;
	const renderedFocusPointBullets = focusBullets.map((focusBullet, index) => {
		return (
			<div
				data-focus-bullet-title={focusBullet.title}
				className="homegrade-blocks-focus-point-bullet"
				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="homegrade-blocks-focus-point-bullet__index">
					{index + 1}
				</span>
			</div>
		);
	});
	return (
		<section
			{...useBlockProps.save({
				className: `homegrade-blocks-focused-schema`,
			})}
		>
			{coverUrl && (
				<figure className={`picture-container`}>
					<img
						src={coverUrl}
						alt={coverAlt}
						className={`wp-image-${coverId}`}
					/>
					{renderedFocusPointBullets}
				</figure>
			)}
			<figcaption>
				<ol>
					<InnerBlocks.Content />
				</ol>
			</figcaption>
		</section>
	);
}