import { useBlockProps, RichText, InnerBlocks } from '@wordpress/block-editor';
import { __ } from '@wordpress/i18n';
import { useSelect, useDispatch } from '@wordpress/data'; // pour les querry

export default function save({ attributes }) {
	const { title, iconUrl, hasTitle, hasIcon, variant, hasLogo, logoAlt, logoUrl, iconPosition } =
		attributes;

	return (
		<section
			{...useBlockProps.save({
				className: `homegrade-blocks-highlight ${
					variant ? `homegrade-blocks-highlight--${variant}` : ''
				}`,
			})}
		>
			{hasTitle && (
				<div
					className={`homegrade-blocks-highlight__titling ${
						!hasIcon ? 'homegrade-blocks-highlight__titling--has-no-icon' : ''
					}`}
				>
					{hasIcon && iconPosition === 'top' && (
						<div className="icon">
							<img className="icon__image" src={iconUrl} alt="" />
						</div>
					)}

					<RichText.Content
						tagName="h3"
						value={title}
						className="homegrade-blocks-highlight__block-title"
					/>
				</div>
			)}
			<div className="homegrade-blocks-highlight__content">
				{hasIcon && iconPosition === 'side' && !hasTitle && (
					<div className="icon">
						<img className="icon__image" src={iconUrl} alt="" />
					</div>
				)}

				<div className="homegrade-blocks-highlight__content__innerblocks">
					<InnerBlocks.Content />
				</div>
				{hasLogo && logoUrl && (
					<div className="homegrade-blocks-highlight__logo">
						<img src={logoUrl} alt={logoAlt} />
					</div>
				)}
			</div>
		</section>
	);
}
