import { useBlockProps, InnerBlocks } from "@wordpress/block-editor";
import Image from "../../_components/Image";
export default function save({ attributes }) {
	let {
		imageAlt,
		imageUrl,
		imageCaption,
		imageDescription,
		imageProportion,
		contentDisposition,
	} = attributes;

	return (
		<div
			{...useBlockProps.save({
				className: `homegrade-blocks-text-image`,
			})}
		>
			{contentDisposition === "left" && (
				<>
					<div className="homegrade-blocks-text-image__column homegrade-blocks-text-image__column--text">
						<InnerBlocks.Content />
					</div>

					<div className="homegrade-blocks-text-image__column homegrade-blocks-text-image__column--image">
						<Image
							imageAlt={imageAlt}
							imageUrl={imageUrl}
							imageProportion={imageProportion}
						/>
						{imageDescription && <p>{imageDescription}</p>}
						{imageCaption && <p>{imageCaption}</p>}
					</div>
				</>
			)}
			{contentDisposition === "right" && (
				<>
					<div className="homegrade-blocks-text-image__column homegrade-blocks-text-image__column--image">
						<Image
							imageAlt={imageAlt}
							imageUrl={imageUrl}
							imageProportion={imageProportion}
						/>
						{imageDescription && <p>{imageDescription}</p>}
						{imageCaption && <p>{imageCaption}</p>}
					</div>
					<div className="homegrade-blocks-text-image__column homegrade-blocks-text-image__column--text">
						<InnerBlocks.Content />
					</div>
				</>
			)}
		</div>
	);
}