/**
 * GnSteps - Multi-step progress indicator.
 * Keeps API compatible with gnexus-ui-kit.
 */

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

export default defineComponent({
	name: "GnSteps",
	inheritAttrs: false,
	props: {
		items: { type: Array, required: true },
		vertical: { type: Boolean, default: false }
	},
	setup(props, { attrs }) {
		return () => h("ol", {
			...attrs,
			class: cx("steps", { "steps-vertical": props.vertical }, attrs.class)
		}, props.items.map((item, index) => {
		const isComplete = item.status === "complete";
		const marker = item.marker || (isComplete ? iconNode("ph-check") : String(index + 1));

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