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

export default function save({ attributes }) {
	let {
		hasStepPictures,
		stepPictureFormat,
		hasStepIcons,
		hasLateralCover,
		lateralCoverUrl,
		lateralCoverAlt,
	} = attributes;

	return (
		<section
			{...useBlockProps.save({
				className: `homegrade-blocks-timeline ${
					hasStepIcons ? "homegrade-blocks-timeline--has-step-icons" : ""
				} ${
					hasStepPictures
						? "homegrade-blocks-timeline--has-step-pictures"
						: "homegrade-blocks-timeline--has-no-step-pictures"
				}
				${hasLateralCover ? "homegrade-blocks-timeline--has-lateral-cover" : ""}`,
			})}
		>
			{hasLateralCover && <img className="homegrade-blocks-timeline__lateral-cover" src={lateralCoverUrl} alt={lateralCoverAlt} />}
			<div className="homegrade-blocks-timeline__innercontent">
				<InnerBlocks.Content />
			</div>
		</section>
	);
}