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

export default defineComponent({
	name: "GnTimeline",
	props: {
		items: { type: Array, default: () => [] }
	},
	setup(props, { attrs, slots }) {
		return () => h("ol", { ...attrs, class: cx("timeline", attrs.class) }, props.items.map(item => {
			const variant = item.variant ? normalizeVariant(item.variant) : "";

			return h("li", { class: cx("timeline-item", variant && `timeline-item-${variant}`) }, [
				h("span", { class: "timeline-marker" }, [iconNode(item.icon || "ph-circle")]),
				h("div", { class: "timeline-content" }, [
					h("article", { class: "timeline-card" }, [
						h("header", { class: "timeline-header" }, [
							h("h3", { class: "timeline-title" }, item.title),
							item.time && h("time", { class: "timeline-time" }, item.time)
						]),
						h("p", { class: "timeline-text" }, slots[item.key]?.({ item }) || item.text),
						(item.meta || slots.meta) && h("div", { class: "timeline-meta" }, slots.meta?.({ item }) || item.meta)
					])
				])
			]);
		}));
	}
});