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

export default function save(props) {
    const { attributes } = props;
    const {displayIcon, buttonText, buttonPadding,iconHeight,iconSvgPath, iconSvgViewbox, buttonAction, customUrl } = attributes; // Destructure buttonText, iconSvgPath, and iconSvgViewbox

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

    // Conditionally render the link or button based on buttonAction
    return (
       
        <div {...blockProps}>
        {buttonAction === 'customUrl' ? (
            <a href={customUrl} className="lcp-button" style={{ padding: buttonPadding || '10px' }}>
                {displayIcon && iconSvgPath && (
                    <svg style={{ height: iconHeight }} className="lcp-icon" xmlns="http://www.w3.org/2000/svg" viewBox={iconSvgViewbox || "0 0 576 576"} dangerouslySetInnerHTML={{ __html: iconSvgPath }} />
                )}
                <span className="lcp-button-text">
                    {buttonText || 'Button'}
                </span>
            </a>
        ) : (
            <button className="lcp-button" style={{ padding: buttonPadding || '10px' }}>
                {displayIcon && iconSvgPath && (
                    <svg style={{ height: iconHeight }} className="lcp-icon" xmlns="http://www.w3.org/2000/svg" viewBox={iconSvgViewbox || "0 0 576 576"} dangerouslySetInnerHTML={{ __html: iconSvgPath }} />
                )}
                <span className="lcp-button-text">
                    {buttonText || 'Button'}
                </span>
            </button>
        )}
    </div>
    );
}
