import { useBlockProps, RichText, InnerBlocks } from "@wordpress/block-editor";
import chevronDown from "../img/chevron_down.svg";

export default function save({ attributes }) {
	const { panelTitle } = attributes;
	return (
		<details
			{...useBlockProps.save({
				className: `homegrade-blocks-accordeon-panel-content homegrade-dynamic-accordeon`,
			})}
		>
			<summary>
				<RichText.Content
					tagName="span"
					className="homegrade-blocks-accordeon-panel-content__title"
					value={panelTitle}
				/>
				<div className="open-close-icon">
					<img src={chevronDown} className="open-close-cta" alt="" />
				</div>
			</summary>

			<div className="homegrade-blocks-accordeon-panel-content__content-wrapper homegrade-dynamic-accordeon__content-wrapper">
				<div className="homegrade-dynamic-accordeon__content">
					<InnerBlocks.Content />
				</div>
			</div>
		</details>
	);
}
