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

export default function save({ attributes }) {
	const { images, height } = attributes;
	const blockProps = useBlockProps.save();

	const getImageStyle = (image) => {
		const focalPoint = image.focalPoint || { x: 0.5, y: 0.5 };
		const scale = image.scale || 0.8;
		const rotation = image.rotation || 0;
		return {
			left: `${focalPoint.x * 100}%`,
			top: `${focalPoint.y * 100}%`,
			transform: `rotate(${rotation}deg) scale(${scale})`,
		};
	};

	return (
		<div {...blockProps}>
			<div className="image-stack-container" style={{ height: `${height}px` }}>
				{images.map((image) => (
					<div
						key={image.id}
						className="image-stack-item"
						style={getImageStyle(image)}
					>
						<img src={image.url} alt={image.alt} />
					</div>
				))}
			</div>
		</div>
	);
}
