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

import chevronDown from "./img/chevron_down.svg";
import { Camera } from "lucide-react";

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	"
				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-thematique`,
			})}
		>
			{coverUrl && (
				<figure className={`picture-container`}>
					<img
						src={coverUrl}
						alt={coverAlt}
						className={`wp-image-${coverId}`}
					/>
					{renderedFocusPointBullets}
				</figure>
			)}
			<button
				className="homegrade-blocks-focused-thematique__figcaption-toggle"
				aria-expanded="false"
			>
				{__(
					"Version texte des indications de l'illustration",
					"homegrade-blocks__texte-fonctionnel"
				)}
				{/* <ChevronDown /> */}
				<img src={chevronDown} alt="" />
			</button>
			<figcaption aria-hidden="true">
				<ol>
					<InnerBlocks.Content />
				</ol>
			</figcaption>
		</section>
	);
}