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

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

	return (
		<div
			{...useBlockProps.save({
				className: `narrative-card ${
					hasCover
						? `narrative-card--has-cover narrative-card--has-cover--${coverPosition} ${
								blackWhiteCoverFilter
									? "narrative-card--black-white-cover-filter"
									: ""
						  }`
						: ""
				}`,
			})}
		>
			<svg
				viewBox="0 0 1216 407"
				fill="none"
				xmlns="http://www.w3.org/2000/svg"
				preserveAspectRatio="none"
				className="narrative-card__background"
			>
				<path
					d="M1 11V406H1205L1215 1L1 11Z"
					fill="white"
					stroke="#136F63"
					strokeWidth="2"
					vectorEffect="non-scaling-stroke"
				/>
			</svg>

			{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>
	);
}
