/**
 * GnEmptyState — empty state placeholder.
 *
 * API-compatible with gnexus-ui-kit GnEmptyState.
 *
 * @typedef {Object} GnEmptyStateProps
 * @property {string} title - Title text
 * @property {string} [text=''] - Description text
 * @property {string} [icon='essentials/package'] - VMK icon key or legacy Phosphor name
 * @property {string} [variant=''] - Optional variant class suffix (error, success, ...)
 *
 * @slots title - Override title content
 * @slots default - Override description content
 * @slots actions - Action buttons area
 */

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

export default defineComponent({
	name: "GnEmptyState",
	inheritAttrs: false,
	props: {
		title: { type: String, required: true },
		text: { type: String, default: "" },
		icon: { type: String, default: "essentials/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())
		]);
	}
});