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

export default function save({ attributes }) {
	const {
		timelineStepTitle,
		timelineStepSubtitle,
		timelineStepImageUrl,
		timelineStepImageAlt,
		timelineStepImageCaption,
		timelineStepImageDescription,
		timelineStepIconUrl,
		timelineStepIconAlt,
		hasStepPicture,
		hasStepIcon,
	} = attributes;
	return (
		<div
			{...useBlockProps.save({
				className: `homegrade-blocks-timeline-step`,
			})}
		>
			{hasStepPicture && (
				<figure className="homegrade-blocks-timeline-step__cover">
					{timelineStepImageUrl && (
						<img src={timelineStepImageUrl} alt={timelineStepImageAlt} />
					)}
					{(timelineStepImageDescription || timelineStepImageCaption) && (
						<figcaption>
							{timelineStepImageDescription && (
								<p className="description">{timelineStepImageDescription}</p>
							)}
							{timelineStepImageCaption && (
								<p className="caption">{timelineStepImageCaption}</p>
							)}
						</figcaption>
					)}
				</figure>
			)}
			<div className={`homegrade-blocks-timeline-step__content`}>
				{hasStepIcon && (
					<div className="homegrade-blocks-timeline-step__icon">
						{timelineStepIconUrl && (
							<img src={timelineStepIconUrl} alt={timelineStepIconAlt} />
						)}
					</div>
				)}
				<div className="homegrade-blocks-timeline-step__text-content">
					<RichText.Content
						tagName="h3"
						className="homegrade-blocks-timeline-step__title"
						value={timelineStepTitle}
					/>
					<RichText.Content
						tagName="p"
						className="homegrade-blocks-timeline-step__subtitle"
						value={timelineStepSubtitle}
					/>
					<InnerBlocks.Content />
				</div>
			</div>
		</div>
	);
}