/**
 * VmkIcon — async inline SVG icon renderer.
 *
 * Loads icons via the shared icon helper and renders them as inline SVG.
 * The icon name is a VMK key such as "essentials/plus" or "arrows/arrow/right".
 */

import { defineComponent, h, onMounted, ref, watch } from "vue";
import { iconSvg } from "../../js/components/icon-helper.js";

export default defineComponent({
	name: "VmkIcon",
	inheritAttrs: false,
	props: {
		name: { type: String, default: "" },
		spin: { type: Boolean, default: false }
	},
	setup(props, { attrs }) {
		const svg = ref("");

		const load = async () => {
			if (!props.name) {
				svg.value = "";
				return;
			}
			svg.value = await iconSvg(props.name);
		};

		onMounted(load);
		watch(() => props.name, load);

		return () => {
			if (!props.name) return null;
			return h("span", {
				...attrs,
				class: ["vmk-icon", { "is-spinning": props.spin }, attrs.class],
				innerHTML: svg.value,
				"aria-hidden": "true"
			});
		};
	}
});