import { useBlockProps } from "@wordpress/block-editor";
import { RichText } from "@wordpress/block-editor";
import { createBlock } from "@wordpress/blocks";

const v2 = {
	attributes: {
		sectionTitle: {
			type: "string",
		},
		sectionSubtitle: {
			type: "string",
		},
		textAlign: {
			type: "string",
			default: "left",
		},
	},

	save({ attributes }) {
		return (
			<div
				{...useBlockProps.save({
					className: `section_titling section_titling--${attributes.textAlign}`,
				})}
			>
				<RichText.Content
					value={attributes.sectionTitle}
					tagName="h3"
					className="section_titling__title"
				/>
				<RichText.Content
					value={attributes.sectionSubtitle}
					tagName="p"
					className="section_titling__subtitle"
				/>
			</div>
		);
	},

	migrate(attributes, innerBlocks) {
		const textAlign = attributes.textAlign;
		return [
			{
				textAlign: textAlign,
			},
			[
				createBlock("core/heading", {
					content: attributes.sectionTitle,
					level: 3,
					className: "section_titling__title",
				}),
				createBlock("core/paragraph", {
					content: attributes.sectionSubtitle,
					className: "section_titling__subtitle",
				}),
			],
		];
	},
};

const v1 = {
	attributes: {
		sectionTitle: {
			type: "string",
		},
		sectionSubtitle: {
			type: "string",
		},
		textAlign: {
			type: "string",
			default: "left",
		},
	},

	save({ attributes }) {
		return (
			<div
				{...useBlockProps.save({
					className: `section_titling section_titling--${textAlign}`,
				})}
			>
				<RichText.Content
					value={sectionTitle}
					tagName="h3"
					className="section_titling__title"
				/>
				<RichText.Content
					value={sectionSubtitle}
					tagName="p"
					className="section_titling__subtitle"
				/>
			</div>
		);
	},
};

export default [v2, v1];