import { __ } from "@wordpress/i18n";
import {
	useBlockProps,
	RichText,
	InnerBlocks,
	InspectorControls,
} from "@wordpress/block-editor";
import "./editor.scss";
import { PanelBody, CheckboxControl } from "@wordpress/components";

export default function Edit({ attributes, setAttributes }) {
	const { hasIcon } = attributes;
	return (
		<>
			<InspectorControls>
				<PanelBody title={__("Icone", "carhop-blocks")}>
					<CheckboxControl
						label={__("Afficher une icône", "carhop-blocks")}
						checked={hasIcon}
						onChange={(value) => setAttributes({ hasIcon: value })}
					/>
				</PanelBody>
			</InspectorControls>
			<div
				{...useBlockProps({
					className: "notice-panel",
				})}
			>
				<div className={`notice-panel__content has-icon-${hasIcon}`}>
					{hasIcon && <div className="icon"></div>}
					<div className="innerblocks">
						<InnerBlocks
							template={[
								["core/paragraph", { placeholder: "Ajouter ici le texte" }],
							]}
						/>
					</div>
				</div>
			</div>
		</>
	);
}
