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

export default function save(props) {
    const { attributes } = props;
    const { type, popUpId, buttonText, iconSvgPath } = attributes; // Destructure buttonText and iconSvgPath from attributes

    // Get the block props for the button
    const blockProps = useBlockProps.save();

    // Conditionally add data-open-popup if type is 'openPopUp' and popUpId is not empty
    if (type === 'openPopUp' && popUpId) {
        blockProps['data-open-popup'] = popUpId; // Add the data attribute dynamically
    }

    return (
        <button {...blockProps}>
            {/* Conditionally render the icon if iconSvgPath is set */}
            {iconSvgPath && (
                <svg className="icon"  viewBox="0 0 24 24" width="100" height="100" dangerouslySetInnerHTML={{ __html: iconSvgPath }} />
            )}
            {/* Render the button text */}
            {buttonText || 'Button'} {/* Use buttonText or fallback */}
        </button>
    );
}