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

export default function save(props) {
    const { attributes } = props;
    const { buttonText, 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 (
        <>
            {buttonAction === 'customUrl' ? (
                // Render an anchor tag if buttonAction is 'customUrl'
                <a href={customUrl} {...blockProps} className="lcp-button">
                    {/* Conditionally render the icon if iconSvgPath is set */}
                    {iconSvgPath && (
                        <svg className="lcp-icon" viewBox={iconSvgViewbox || "0 0 576 576"} dangerouslySetInnerHTML={{ __html: iconSvgPath }} />
                    )}
                    {/* Render the button text */}
                    {buttonText || 'Button'} {/* Use buttonText or fallback */}
                </a>
            ) : (
                // Render a button if buttonAction is not 'customUrl'
                <button {...blockProps} className="lcp-button">
                    {/* Conditionally render the icon if iconSvgPath is set */}
                    {iconSvgPath && (
                        <svg className="lcp-icon" viewBox={iconSvgViewbox || "0 0 576 576"} dangerouslySetInnerHTML={{ __html: iconSvgPath }} />
                    )}
                    {/* Render the button text */}
                    {buttonText || 'Button'} {/* Use buttonText or fallback */}
                </button>
            )}
        </>
    );
}
