import { useBlockProps, RichText } from "@wordpress/block-editor";
import keyIcon from "./img/icon_key.svg";
import chainIcon from "./img/icon_chain.svg";
import houseIcon from "./img/icon_house.svg";
import bulbIcon from "./img/icon_bulb.svg";
import warningIcon from "./img/icon_warning.svg";
import acousticIcon from "./img/icon_acoustic.svg";
import documentationIcon from "./img/icon_documentation.svg";
import notificationIcon from "./img/icon_notification.svg";
import searchIcon from "./img/icon_search.svg";
import infoIcon from "./img/icon_info.svg";
import tipIcon from "./img/icon_tip.svg";
import euroIcon from "./img/icon_euro.svg";

export default function save({ attributes }) {
	const { title, headingLevel, hasIcon, iconName, idName } = attributes;
	function getIconPicture() {
		switch (iconName) {
			case "key":
				return keyIcon;

			case "chain":
				return chainIcon;

			case "house":
				return houseIcon;

			case "bulb":
				return bulbIcon;

			case "warning":
				return warningIcon;

			case "acoustic":
				return acousticIcon;

			case "documentation":
				return documentationIcon;

			case "notification":
				return notificationIcon;

			case "search":
				return searchIcon;

			case "info":
				return infoIcon;

			case "tip":
				return tipIcon;

			case "euro":
				return euroIcon;
		}
	}
	let iconPicture = getIconPicture();
	return (
		<>
			<RichText.Content
				id={idName}
				tagName={headingLevel}
				value={title}
				{...useBlockProps.save({
					className: `homegrade-blocks-custom-heading ${
						hasIcon ? "has-icon has-icon--" + iconName : ""
					}`,
				})}
			/>
		</>
	);
}