import { __ } from "@wordpress/i18n";
import "./editor.scss";

import { useBlockProps, RichText } from "@wordpress/block-editor";

export default function Edit({ attributes, setAttributes, ...props }) {
	let { figure, title, caption } = attributes;

	function onTitleChange(title) {
		setAttributes({ title });
	}
	function onFigureChange(figure) {
		setAttributes({ figure });
	}
	function onCaptionChange(caption) {
		setAttributes({ caption });
	}

	return (
		<>
			<figure
				{...useBlockProps({
					className: `homegrade-blocks-figure`,
				})}
			>
				<RichText
					tagName="h3"
					onChange={onFigureChange}
					value={figure}
					className="homegrade-blocks-figure__figure"
					placeholder="Chiffre"
				/>
				<RichText
					tagName="p"
					onChange={onTitleChange}
					value={title}
					placeholder="Sous titre du chiffre"
					className="homegrade-blocks-figure__title"
				/>
				<figcaption className="homegrade-blocks-figure__caption">
					<RichText
						tagName="p"
						onChange={onCaptionChange}
						value={caption}
						placeholder="explication"
					/>
				</figcaption>
			</figure>
		</>
	);
}