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

export default function save({ attributes }) {
	const { tipTitle, tipIconAlt, tipIconUrl, hasTipSubtitle, tipSubtitle } =
		attributes;

	return (
		<div
			{...useBlockProps.save({
				className: `homegrade-blocks-tips-to-know__tip`,
			})}
		>
			<div className="homegrade-blocks-tips-to-know__tip-icon">
				{tipIconUrl && <img src={tipIconUrl} alt={tipIconAlt} />}
			</div>
			<div className="tip-content">
				<RichText.Content
					className="homegrade-blocks-tips-to-know__tip-title"
					tagName="h4"
					value={tipTitle}
				/>

				{hasTipSubtitle && (
					<RichText.Content
						value={tipSubtitle}
						className="homegrade-blocks-tips-to-know__tip-subtitle"
						tagName="h5"
					/>
				)}
				<InnerBlocks.Content />
			</div>
		</div>
	);
}
