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

export default function save({ attributes }) {
	const { chapterTitle, chapterDescription, chapterImageUrl, chapterImageAlt } =
		attributes;
	return (
		<div
			{...useBlockProps.save({
				className: `homegrade-blocks-chapitre-thematique`,
				id: chapterTitle.replace(/[^a-zA-Z]/g, "").toLowerCase(),
			})}
		>
			<div className="homegrade-blocks-chapitre-thematique__cover">
				{chapterImageUrl && <img src={chapterImageUrl} alt={chapterImageAlt} />}
			</div>
			<div className="homegrade-blocks-chapitre-thematique__content">
				<RichText.Content tagName="h3" value={chapterTitle} />
				<RichText.Content tagName="p" value={chapterDescription} />
				<InnerBlocks.Content />
			</div>
		</div>
	);
}
