/**
 * React hook that is used to mark the block wrapper element.
 * It provides all the necessary props like the class name.
 *
 * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-block-editor/#useblockprops
 */
import { useBlockProps } from "@wordpress/block-editor";

/**
 * The save function defines the way in which the different attributes should
 * be combined into the final markup, which is then serialized by the block
 * editor into `post_content`.
 *
 * @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-edit-save/#save
 *
 * @param {Object} props - Block properties
 * @param {Object} props.attributes - Block attributes
 * @return {Element} Element to render.
 */
export default function save({ attributes }) {
	const { width, height, aspectRatio } = attributes;

	// Minimum dimensions
	const MIN_WIDTH = 800;
	const MIN_HEIGHT = 450;

	const actualWidth = width || MIN_WIDTH;
	const actualHeight = height || MIN_HEIGHT;

	// Calculate container styles
	const containerStyle = {
		width: `${actualWidth}px`,
		position: "relative",
	};

	// Apply aspect ratio or explicit height
	if (aspectRatio === "custom" || (aspectRatio === "auto" && height)) {
		containerStyle.height = `${actualHeight}px`;
	} else if (aspectRatio && aspectRatio !== "auto") {
		containerStyle.aspectRatio = aspectRatio;
	} else {
		// Default aspect ratio when auto and no explicit height
		containerStyle.aspectRatio = "16/9";
	}

	const blockProps = useBlockProps.save({
		className: "stw-embed-block",
		"data-width": width,
		"data-height": height,
		"data-aspect-ratio": aspectRatio,
		style: containerStyle,
	});

	// Return empty container - view.js will create iframe dynamically if product is linked
	return <div {...blockProps}></div>;
}
