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

export default function save({ attributes }) {
	const {
		backgroundColor,
		textColor,
		hasLightBackground,
		hasBackgroundColor,
		hasBorder,
	} = attributes;
	return (
		<div
			{...useBlockProps.save({
				className: `content-card ${
					hasLightBackground
						? "content-card--bg-light"
						: "content-card--bg-dark"
				} ${hasBorder ? "content-card--has-border" : ""}`,
				style: {
					"--content-card-text-color": textColor ?? "inherit",
					"--content-card-background-color": hasBackgroundColor
						? backgroundColor
						: "transparent",
				},
			})}
		>
			<div className="content-card__innerblocks">
				<InnerBlocks.Content />
			</div>
		</div>
	);
}
