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

export default function save({ attributes }) {
	let {
		hasTitle,
		blockTitle,
		blockSubtitle,
		hasStepPictures,
		lateralPicturesFormat,
		hasStepIcons,
		hasLateralCover,
		lateralCoverUrl,
		lateralCoverAlt,
		lateralCoverCaption,
		lateralCoverDescription,
	} = 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" : ""}`,
			})}
		>
			{hasTitle && (
				<div className="section_titling section_titling--center">
					<RichText.Content
						value={blockTitle}
						tagName="h3"
						className="section_titling__title"
					/>
					<RichText.Content
						value={blockSubtitle}
						tagName="h4"
						className="section_titling__subtitle"
					/>
				</div>
			)}
			<div className="homegrade-blocks-timeline__container">
				{hasLateralCover && lateralCoverUrl && (
					<figure
						className={`homegrade-blocks-timeline__lateral-cover homegrade-blocks-timeline__lateral-cover--${lateralPicturesFormat}`}
					>
						<img src={lateralCoverUrl} alt={lateralCoverAlt} />

						{(lateralCoverDescription || lateralCoverCaption) && (
							<figcaption>
								{lateralCoverDescription && (
									<p className="description">{lateralCoverDescription}</p>
								)}
								{lateralCoverCaption && (
									<p className="caption">{lateralCoverCaption}</p>
								)}
							</figcaption>
						)}
					</figure>
				)}
				<div className="homegrade-blocks-timeline__innercontent">
					<InnerBlocks.Content />
				</div>
			</div>
		</section>
	);
}