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

export default function save({ attributes }) {
	const {
		hasStickyLegend,
		hasLightbox,
		legendLocation,
		hasFixedHeight,
		hasRoundedShadow,
		showTitle,
		pictureUrl,
		pictureAlt,
		pictureTitle,
		pictureCaption,
	} = attributes;

	const renderCaption = () => (
		<figcaption>
			{showTitle && pictureTitle && (
				<span className="figcaption-title">{pictureTitle}</span>
			)}{" "}
			{pictureCaption}
		</figcaption>
	);

	return (
		<>
			{pictureUrl && (
				<figure
					{...useBlockProps.save({
						className: `homegrade-blocks-labelled-picture homegrade-blocks-labelled-picture--legend-${
							hasStickyLegend ? "sticky" : "normal"
						} ${
							hasFixedHeight
								? "homegrade-blocks-labelled-picture--fixed-height"
								: ""
						} 
						${
							showTitle && pictureTitle
								? "homegrade-blocks-labelled-picture--legend-has-title"
								: ""
						}
						${hasRoundedShadow ? "homegrade-blocks-labelled-picture--rounded-shadow" : ""} 
						
						${hasLightbox ? "singleLightbox-link" : ""} 
						`,
					})}
				>
					{legendLocation === "before" && renderCaption()}
					<img src={pictureUrl} alt={pictureAlt} />
					{legendLocation === "after" && renderCaption()}
				</figure>
			)}
		</>
	);
}