import { __ } from "@wordpress/i18n";
import {
	useBlockProps,
	InnerBlocks,
	InspectorControls,
} from "@wordpress/block-editor";
import "./editor.scss";
import Shapes from "./Shapes";
import {
	__experimentalToggleGroupControl as ToggleGroupControl,
	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
	PanelBody,
} from "@wordpress/components";
export default function Edit({ attributes, setAttributes }) {
	const { variant } = attributes;
	return (
		<>
			<InspectorControls>
				<PanelBody title={__("Shapes", "carhop-blocks")}>
					<ToggleGroupControl
						className="deligraph-blocks__variant"
						isBlock
						label="Variante"
						onChange={(value) => setAttributes({ variant: value })}
						value={variant}
					>
						<ToggleGroupControlOption label="Medium" value="medium" />
						<ToggleGroupControlOption label="Big" value="big" />
					</ToggleGroupControl>
				</PanelBody>
			</InspectorControls>
			<div
				{...useBlockProps({
					className: `carhop-decorative-shapes decorative-shapes decorative-shapes--${variant}`,
				})}
			>
				<Shapes />
			</div>
		</>
	);
}
