/**
 * GnProgressStages — horizontal staged progress indicator.
 *
 * API-compatible with gnexus-ui-kit GnProgressStages.
 */

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

export default defineComponent({
	name: "GnProgressStages",
	inheritAttrs: false,
	props: {
		items: { type: Array, default: () => [] }
	},
	setup(props, { attrs }) {
		return () => h("div", {
			...attrs,
			class: cx("progress-stages", attrs.class)
		}, props.items.map(item => h("span", {
			class: cx("progress-stage", {
				"progress-stage-complete": item.status === "complete",
				"progress-stage-current": item.status === "current"
			})
		}, item.label || item)));
	}
});