import { defineComponent, h } from "vue";
import { cx, iconNode, normalizeVariant } from "../utils.js";

const STATE_ICONS = {
	success: "essentials/check/circle",
	warning: "essentials/alert-sign",
	info: "essentials/information/circle",
	danger: "essentials/alert/circle",
	error: "essentials/alert/circle"
};

export default defineComponent({
	name: "GnAlert",
	inheritAttrs: false,
	props: {
		variant: { type: String, default: "primary" },
		icon: { type: String, default: "" },
		role: { type: String, default: "status" },
		title: { type: String, default: "" },
		dismissible: { type: Boolean, default: false }
	},
	emits: ["dismiss"],
	setup(props, { attrs, slots, emit }) {
		return () => {
			const variant = normalizeVariant(props.variant);
			const iconName = props.icon || STATE_ICONS[variant] || "";

			return h("div", {
				...attrs,
				role: props.role,
				class: cx("alert", `alert-${variant}`, attrs.class)
			}, [
				iconNode(iconName),
				h("div", { class: "alert-content" }, [
					props.title && h("div", { class: "alert-title" }, props.title),
					slots.default?.()
				]),
				props.dismissible && h("button", {
					type: "button",
					class: "alert-close",
					"aria-label": "Dismiss",
					onClick: () => emit("dismiss")
				}, [iconNode("ph-x")])
			]);
		};
	}
});