import { useBlockProps, InspectorControls } from '@wordpress/block-editor';
import { PanelBody, ToggleControl, TextControl } from '@wordpress/components';

export default function Edit({ attributes, setAttributes }) {
	const { menuId, collapsed } = attributes;
	const blockProps = useBlockProps();

	return (
		<>
			<InspectorControls>
				<PanelBody title="Drawer Settings">
					<TextControl
						label="Menu ID"
						value={menuId}
						onChange={(value) => setAttributes({ menuId: value })}
						help="PHP-generated menu identifier"
					/>
					<ToggleControl
						label="Start Collapsed"
						checked={collapsed}
						onChange={(value) => setAttributes({ collapsed: value })}
					/>
				</PanelBody>
			</InspectorControls>
			<div {...blockProps}>
				<div className="drawer-menu-preview">
					<p>Drawer Menu: {menuId || 'Not configured'}</p>
					<p>State: {collapsed ? 'Collapsed' : 'Expanded'}</p>
				</div>
			</div>
		</>
	);
}