const { createElement } = wp.element;

wp.blocks.registerBlockType( 'test/test', {
	apiVersion: 3,
	title: 'Test Block',
	edit: () => {
		return createElement(
			'div',
			{
				...wp.blockEditor.useBlockProps(),
				style: {
					display: 'flex',
					flexDirection: 'column',
					gap: '10px',
				},
			},
			createElement( 'input', {
				type: 'text',
				value: 'Text input',
			} ),

			createElement( 'input', {
				type: 'number',
				value: '11111111',
			} ),
			createElement( 'textarea', {
				value: 'Textarea',
			} ),
			createElement( 'input', {
				type: 'color',
			} ),
			createElement( 'input', {
				type: 'file',
			} ),
			[ 1, 2, 3 ].map( ( num ) =>
				createElement(
					'div',
					{ key: num },
					createElement( 'input', {
						type: 'checkbox',
						value: num,
						name: 'checkbox',
						id: `checkbox-${ num }`,
					} ),
					createElement(
						'label',
						{ htmlFor: `checkbox-${ num }` },
						`Checkbox ${ num }`
					)
				)
			),
			[ 1, 2, 3 ].map( ( num ) =>
				createElement(
					'div',
					{ key: num },
					createElement( 'input', {
						type: 'radio',
						value: num,
						name: 'radio',
						id: `radio-${ num }`,
					} ),
					createElement(
						'label',
						{ htmlFor: `radio-${ num }` },
						`Radio ${ num }`
					)
				)
			),
			createElement(
				'select',
				{},
				createElement( 'option', { value: 'A' }, 'Option A' ),
				createElement( 'option', { value: 'B' }, 'Option B' ),
				createElement( 'option', { value: 'C' }, 'Option C' )
			),
			createElement(
				'button',
				{
					type: 'button',
					onClick: () => window.alert( 'Button clicked' ),
				},
				'Click Me'
			)
		);
	},
} );