const { registerBlockType } = wp.blocks;
const { useBlockProps } = wp.blockEditor;

registerBlockType('srh/offcanvas-menu', {
    apiVersion: 2,
    title: 'Off Canvas Menu',
    icon: 'menu',
    category: 'srh-blocks',
    attributes: {},
    
    edit: function() {
        const blockProps = useBlockProps();
        
        return (
            <div { ...blockProps }>
                <button className="hamburger-toggle" aria-label="Toggle Menu">
                    <span></span>
                    <span></span>
                    <span></span>
                </button>
                <div className="offcanvas-menu">
                    <div className="offcanvas-menu-inner">
                        <p>Menu will appear here on frontend</p>
                    </div>
                </div>
            </div>
        );
    },
    
    save: () => null
});