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

export default defineComponent({
	name: "GnEmptyState",
	props: {
		title: { type: String, required: true },
		text: { type: String, default: "" },
		icon: { type: String, default: "ph-package" },
		variant: { type: String, default: "" }
	},
	setup(props, { attrs, slots }) {
		return () => h("div", {
			...attrs,
			class: cx("empty-state", props.variant && `empty-state-${props.variant}`, attrs.class)
		}, [
			h("div", { class: "empty-state-icon" }, [iconNode(props.icon)]),
			h("h3", { class: "empty-state-title" }, slots.title?.() || props.title),
			(props.text || slots.default) && h("p", { class: "empty-state-text" }, slots.default?.() || props.text),
			slots.actions && h("div", { class: "empty-state-actions" }, slots.actions())
		]);
	}
});