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

export default defineComponent({
	name: "GnStatusCard",
	props: {
		title: { type: String, required: true },
		text: { type: String, default: "" },
		icon: { type: String, default: "ph-stack" },
		variant: { type: String, default: "primary" }
	},
	setup(props, { attrs, slots }) {
		const variant = normalizeVariant(props.variant);

		return () => h("article", { ...attrs, class: cx("card status-card", `card-${variant}`, attrs.class) }, [
			h("span", { class: "card-title" }, slots.title?.() || props.title),
			h("div", { class: "card-content" }, [
				h("div", { class: "status-icon-container" }, [
					h("div", { class: "status-icon" }, slots.icon?.() || [iconNode(props.icon)])
				]),
				(props.text || slots.default) && h("p", { class: "status-name" }, slots.default?.() || props.text)
			])
		]);
	}
});