/**
 * GnStep - Single step for use inside GnSteps.
 * Keeps API compatible with gnexus-ui-kit.
 */

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

export default defineComponent({
	name: "GnStep",
	props: {
		title: { type: String, default: "" },
		text: { type: String, default: "" },
		marker: { type: [String, Number], default: "" },
		status: { type: String, default: "" },
		disabled: { type: Boolean, default: false }
	},
	setup(props, { slots }) {
		const isComplete = () => props.status === "complete";
		const resolvedMarker = () => {
			if(slots.marker) return slots.marker();
			if(props.marker) return props.marker;
			return isComplete() ? iconNode("ph-check") : "";
		};

		return () => h("li", {
			class: cx("step", {
				"step-complete": isComplete(),
				"step-current": props.status === "current",
				"step-disabled": props.disabled || props.status === "disabled"
			})
		}, [
			h("span", { class: "step-marker" }, resolvedMarker()),
			h("h3", { class: "step-title" }, slots.title?.() || props.title),
			(props.text || slots.text) && h("p", { class: "step-text" }, slots.text?.() || props.text)
		]);
	}
});