/**
 * GnDescriptionList — term/value pairs.
 *
 * API-compatible with gnexus-ui-kit GnDescriptionList.
 *
 * @typedef {Object} GnDescriptionListProps
 * @property {Array<{term?: string, label?: string, value?: any, muted?: boolean, key?: string}>} [items=[]]
 * @property {boolean} [compact=false]
 *
 * @slots [item.key] - Custom content for a specific item
 */

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

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