import { useBlockProps, RichText, InnerBlocks } from "@wordpress/block-editor";
export default function save({ attributes }) {
	const {
		hasLightBackground,
		disposition,
		coverUrl,
		coverAlt,
		coverSize,
		coverType,
		backgroundColor,
		hasBackgroundColor,
		backgroundOrientation,
		blockWidth,
		textColor,
		shapeType,
	} = attributes;

	return (
		<section
			{...useBlockProps.save({
				className: `deligraph-blocks-chapter-section chapter-section chapter-section--${disposition} 
			${
				blockWidth === "full"
					? "chapter-section--width-full"
					: "chapter-section--width-contained"
			}
				${hasLightBackground ? "chapter-section--bg-light" : "chapter-section--bg-dark"}
			${
				hasBackgroundColor && backgroundColor
					? "chapter-section--has-background"
					: ""
			}`,
				style: {
					"--chapter-section-text-color": textColor ? textColor : "#136f63",
				},
			})}
		>
			{hasBackgroundColor && backgroundColor && shapeType === "variationA" && (
				<>
					<svg
						width="1440"
						height="744"
						viewBox="0 0 1440 744"
						fill="none"
						xmlns="http://www.w3.org/2000/svg"
						className={`chapter-section__background chapter-section__background--${backgroundOrientation}`}
						preserveAspectRatio="none"
					>
						<path d="M0 0H1440V686.701L0 744V0Z" fill={backgroundColor} />
					</svg>
				</>
			)}
			{hasBackgroundColor && backgroundColor && shapeType === "variationB" && (
				<>
					<svg
						className={`chapter-section__background chapter-section__background--${backgroundOrientation}`}
						width="1302"
						height="654"
						viewBox="0 0 1302 654"
						preserveAspectRatio="none"
					>
						<path
							d="M1302 0L0 15.8281V654L1302 642.633L1302 0Z"
							fill={backgroundColor}
						/>
					</svg>
				</>
			)}

			<div className="chapter-section__content">
				<div className="chapter-section__innerblocks">
					<InnerBlocks.Content />
				</div>
			</div>
			{coverUrl && (
				<img
					className={`chapter-section__cover chapter-section__cover--${coverSize} chapter-section__cover--${coverType}`}
					src={coverUrl}
					alt={coverAlt}
				/>
			)}
		</section>
	);
}