/**
 * WordPress dependencies
 */
import { useBlockProps } from '@wordpress/block-editor';

/**
 * Save component for the AI Image Generator block.
 *
 * Renders the static frontend output of the block.
 *
 * @param {Object} props            Block props.
 * @param {Object} props.attributes Block attributes.
 * @return {JSX.Element|null} Block frontend output or null if no image.
 */
export default function save({ attributes }) {
    const { imageUrl, alt, attachmentId, width, height } = attributes;
    const blockProps = useBlockProps.save();

    // Don't render anything if no image has been generated
    if (!imageUrl) {
        return null;
    }

    return (
        <figure {...blockProps}>
            <img
                src={imageUrl}
                alt={alt || ''}
                className={attachmentId ? `wp-image-${attachmentId}` : ''}
                width={width || undefined}
                height={height || undefined}
            />
        </figure>
    );
}
