/**
 * GnListItem - Single list item with optional icon and meta.
 */

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

export default defineComponent({
	name: "GnListItem",
	props: {
		icon: { type: String, default: "" },
		meta: { type: String, default: "" },
		active: { type: Boolean, default: false },
		disabled: { type: Boolean, default: false }
	},
	emits: ["click"],
	setup(props, { slots, emit }) {
		const classes = computed(() => cx("list-item", {
			"is-active": props.active,
			"is-disabled": props.disabled
		}));

		return () => h("li", {
			class: classes.value,
			tabindex: props.disabled ? undefined : "0",
			onClick: () => !props.disabled && emit("click")
		}, [
			props.icon && h("span", { class: "list-item-icon" }, [iconNode(props.icon)]),
			h("span", { class: "list-item-content" }, slots.default?.()),
			props.meta && h("span", { class: "list-item-meta" }, props.meta)
		]);
	}
});