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

export default defineComponent({
	name: "GnList",
	props: {
		items: { type: Array, default: () => [] },
		ordered: { type: Boolean, default: false },
		icons: { type: Boolean, default: false }
	},
	setup(props, { attrs, slots }) {
		const tag = props.ordered ? "ol" : "ul";

		return () => h(tag, {
			...attrs,
			class: cx("list", {
				"list-ordered": props.ordered,
				"with-icons": props.icons
			}, attrs.class)
		}, props.items.map(item => h("li", { class: "list-item" }, [
			iconNode(item.icon),
			slots.item?.({ item }) || item.label || item
		])));
	}
});