import { __ } from "@wordpress/i18n";
import { useBlockProps, InnerBlocks } from "@wordpress/block-editor";
import "./editor.scss";
import { BlockControls, AlignmentToolbar } from "@wordpress/block-editor";

export default function Edit({ attributes, setAttributes }) {
	const { align } = attributes;
	return (
		<>
			<BlockControls>
				<AlignmentToolbar
					value={align}
					onChange={(value) => setAttributes({ align: value })}
				/>
			</BlockControls>
			<div
				{...useBlockProps({
					className: `cta-group cta-group--align-${align}`,
				})}
			>
				<InnerBlocks
					allowedBlocks={["carhop-blocks/cta"]}
					template={[["carhop-blocks/cta"]]}
				/>
			</div>
		</>
	);
}