import { useBlockProps, InnerBlocks } from "@wordpress/block-editor";
import { isColorLight } from "../../_utilities/utilities";

export default function save({ attributes }) {
	const {
		backgroundColor,
		textColor,
		hasLightBackground,
		hasBackgroundColor,
		blockVariant,
	} = attributes;
	return (
		<section
			{...useBlockProps.save({
				className: `content-box content-box--variant-${blockVariant} ${
					hasLightBackground ? "content-box--bg-light" : "content-box--bg-dark"
				}`,
				style: {
					"--content-box-text-color": textColor ?? "inherit",
					"--content-box-background-color":
						blockVariant === "backgrounded" ? backgroundColor : "transparent",
				},
			})}
		>
			<div className="content-box__innerblocks">
				<InnerBlocks.Content />
			</div>
		</section>
	);
}