import { useBlockProps } from "@wordpress/block-editor";
export default function save({ attributes }) {
	const {
		coverUrl,
		coverId,
		coverAlt,
		coverCaption,
		coverDescription,
		heightFixed,
		imagePosition,
	} = attributes;
	return (
		<figure
			{...useBlockProps.save({
				className: `homegrade-content-blocks-picture-banner  ${
					heightFixed ? "fixed-height" : ""
				}`,
			})}
		>
			{coverUrl && (
				<>
					<img
						src={coverUrl}
						alt={coverAlt}
						style={{
							objectPosition: `${imagePosition.x * 100}% ${
								imagePosition.y * 100
							}%`,
						}}
						className={`wp-image-${coverId}`}
					/>
					{coverCaption && (
						<figcaption className="homegrade-content-blocks-picture-banner__caption">
							{coverCaption}
						</figcaption>
					)}
				</>
			)}
		</figure>
	);
}
