/**
 * GnDefinitionList — term/value pairs rendered as a definition list.
 *
 * API-compatible with gnexus-ui-kit GnDefinitionList.
 */

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

export default defineComponent({
	name: "GnDefinitionList",
	inheritAttrs: false,
	props: {
		items: { type: Array, default: () => [] }
	},
	setup(props, { attrs, slots }) {
		return () => h("dl", {
			...attrs,
			class: cx("list", "list-definition", attrs.class)
		}, props.items.map(item => h("div", {
			class: "list-row"
		}, [
			h("dt", { class: "list-term" }, item.term || item.label || item.key),
			h("dd", { class: "list-desc" }, slots[item.key]?.({ item }) || item.description || item.value)
		])));
	}
});