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

export default function Edit({ attributes, setAttributes }) {
	const { title } = attributes;
	return (
		<section
			{...useBlockProps({
				className: "subscribe-infolettre alignfull",
			})}
		>
			<div className="subscribe-infolettre__inner">
				<div className="subscribe-infolettre__content">
					<p className="block-title">infolettre</p>
					<RichText
						tagName="h2"
						className="subscribe-infolettre__title"
						placeholder="Description"
						value={title}
						onChange={(value) => setAttributes({ title: value })}
					/>
					<InnerBlocks
						template={[
							// [
							// 	"core/heading",
							// 	{
							// 		className: "subscribe-infolettre__title",
							// 		placeholder: "Titre",
							// 		content: "Un titre précis ",
							// 	},
							// ],
							[
								"core/paragraph",
								{
									className: "subscribe-infolettre__description",
									placeholder: "Description",
									content:
										"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse augue augue, sagittis quis mauris in, consequat vehicula est. Aliquam quis nulla ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras bibendum eget lorem eget aliquet. Fusce vel consequat neque. ",
								},
							],
						]}
						allowedBlocks={[
							"core/heading",
							"core/paragraph",
							"core/list",
							"core/button",
							"core/buttons",
						]}
					/>
				</div>

				<div className="subscribe-infolettre__form">
					<form action="">
						<input type="text" placeholder="Nom" />
						<input type="email" placeholder="Adresse email" />
						<button type="submit">S'abonner</button>
					</form>
				</div>
			</div>
		</section>
	);
}
