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,
	} = 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 && (
				<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>
	);
}
