/**
 * GnActionList - List of actionable items with title, subtitle and controls slots.
 *
 * @typedef {Object} GnActionListProps
 * @property {Array} [items=[]] - Items as objects with title/label, subtitle, muted, etc.
 *
 * @slots title - Override title for an item (scope: { item })
 * @slots subtitle - Override subtitle for an item (scope: { item })
 * @slots controls - Right-side controls for an item (scope: { item })
 */

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

export default defineComponent({
	name: "GnActionList",
	inheritAttrs: false,
	props: {
		items: { type: Array, default: () => [] }
	},
	setup(props, { attrs, slots }) {
		return () => h("ul", { ...attrs, class: cx("list list-actions", attrs.class) }, props.items.map(item => h("li", {
			class: cx("list-item", item.muted && "list-item-muted")
		}, [
			h("div", { class: "list-content" }, [
				h("div", { class: "list-title" }, slots.title?.({ item }) || item.title || item.label || ""),
				(item.subtitle || slots.subtitle) && h("div", { class: "list-subtitle" }, slots.subtitle?.({ item }) || item.subtitle)
			]),
			slots.controls && h("div", { class: "list-controls" }, slots.controls({ item }))
		])));
	}
});