import { useBlockProps } from "@wordpress/block-editor";
import { InnerBlocks } from "@wordpress/block-editor";

export default function save({ attributes }) {
	const { hasCover, coverUrl, coverAlt, coverPosition } = attributes;

	return (
		<div
			{...useBlockProps.save({
				className: `narrative-card ${
					hasCover
						? `narrative-card--has-cover narrative-card--has-cover--${coverPosition}`
						: ""
				}`,
			})}
		>
			{hasCover && coverPosition === "left" && (
				<div className="narrative-card__cover">
					{hasCover && coverUrl && <img src={coverUrl} alt={coverAlt} />}
				</div>
			)}
			<div className="narrative-card__content">
				<InnerBlocks.Content />
			</div>
			{hasCover && coverPosition === "right" && (
				<div className="narrative-card__cover">
					{hasCover && coverUrl && <img src={coverUrl} alt={coverAlt} />}
				</div>
			)}
		</div>
	);
}