;(function (blocks, element, blockEditor) {
	const { registerBlockType } = blocks
	const { createElement: el } = element
	const { RichText, useBlockProps } = blockEditor

	registerBlockType('aac/alert-info', {
		title: 'Alert info',
		icon: 'info',
		category: 'widgets',
		attributes: {
			title: { type: 'string', source: 'html', selector: 'strong' },
			content: { type: 'string', source: 'html', selector: 'p' },
		},

		edit: function (props) {
			const { attributes, setAttributes } = props
			const { title, content } = attributes
			const blockProps = useBlockProps({ className: 'alert-info' })

			return el('div', blockProps, [
				el('div', { className: 'alert-header' }, [
					el('img', {
						src: '/wp-content/uploads/2025/10/WarningCircle.svg',
						alt: 'Alert icon',
						className: 'alert-icon',
					}),
					el(
						'span',
						null,
						el(RichText, {
							tagName: 'strong',
							placeholder: 'Ważna informacja',
							value: title,
							onChange: (val) => setAttributes({ title: val }),
						})
					),
				]),
				el(RichText, {
					tagName: 'p',
					placeholder: 'Treść alertu...',
					value: content,
					onChange: (val) => setAttributes({ content: val }),
				}),
			])
		},

		save: function (props) {
			const { attributes } = props
			const { title, content } = attributes

			return el('div', { className: 'alert-info' }, [
				el('div', { className: 'alert-header' }, [
					el('img', {
						src: '/wp-content/uploads/2025/10/WarningCircle.svg',
						alt: 'Alert icon',
						className: 'alert-icon',
					}),
					el(
						'span',
						null,
						el(RichText.Content, { tagName: 'strong', value: title })
					),
				]),
				el(RichText.Content, { tagName: 'p', value: content }),
			])
		},
	})
})(window.wp.blocks, window.wp.element, window.wp.blockEditor)