/**
 * GnInputGroup — composes an input with an addon and/or action.
 *
 * API-compatible with gnexus-ui-kit GnInputGroup.
 *
 * @typedef {Object} GnInputGroupProps
 * @property {boolean} [compact=false]
 * @property {string} [addon=''] - Text addon (left side)
 * @property {string} [icon=''] - Icon addon (left side, VMK key or legacy Phosphor name)
 *
 * @slots default - The input element
 * @slots addon - Custom left addon content (overrides addon/icon)
 * @slots action - Right-side action content (button, icon, etc.)
 */

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

export default defineComponent({
	name: "GnInputGroup",
	inheritAttrs: false,
	props: {
		compact: { type: Boolean, default: false },
		addon: { type: String, default: "" },
		icon: { type: String, default: "" }
	},
	setup(props, { attrs, slots }) {
		return () => h("div", {
			...attrs,
			class: cx("input-group", { "input-group-compact": props.compact }, attrs.class)
		}, [
			(props.addon || props.icon || slots.addon) && h("span", { class: "input-group-addon" }, slots.addon?.() || iconNode(props.icon) || props.addon),
			slots.default?.(),
			slots.action && h("span", { class: "input-group-action" }, slots.action())
		]);
	}
});