import { useBlockProps, RichText, InnerBlocks } from "@wordpress/block-editor";
import { __ } from "@wordpress/i18n";
import { useSelect, useDispatch } from "@wordpress/data"; // pour les querry
import keyIcon from "./img/icon_feather_key.svg";
import chainIcon from "./img/icon_block_chain.svg";
import houseIcon from "./img/icon_house.svg";
import bulbIcon from "./img/icon_bulb.svg";

export default function save({ attributes }) {
	const {
		title,
		iconName,
		hasTitle,
		hasTitleIcon,
		variant,
		hasLogo,
		logoAlt,
		logoUrl,
	} = attributes;
	function getIconPicture() {
		switch (iconName) {
			case "key":
				return keyIcon;

			case "chain":
				return chainIcon;

			case "house":
				return houseIcon;

			case "bulb":
				return bulbIcon;
		}
	}
	let iconPicture = getIconPicture();

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

					<RichText.Content
						tagName="h3"
						value={title}
						className="homegrade-blocks-highlight__block-title"
					/>
				</div>
			)}
			<div className="homegrade-blocks-highlight__content">
				<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>
	);
}