import { useBlockProps, RichText, InnerBlocks } from "@wordpress/block-editor";
export default function save({ attributes }) {
	const {
		disposition,
		coverUrl,
		coverAlt,
		coverSize,
		backgroundColor,
		hasBackgroundColor,
		backgroundOrientation,
		blockWidth,
	} = attributes;
	return (
		<section
			{...useBlockProps.save({
				className: `deligraph-blocks-chapter-section chapter-section chapter-section--${disposition} ${
					backgroundColor ? "chapter-section--has-background" : ""
				} 	${
					blockWidth === "full"
						? "chapter-section--width-full"
						: "chapter-section--width-contained"
				}`,
			})}
		>
			{hasBackgroundColor && backgroundColor && (
				<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}`}
					src={coverUrl}
					alt={coverAlt}
				/>
			)}
		</section>
	);
}