/**
 * GnIconButton — icon-only button.
 *
 * API-compatible with gnexus-ui-kit GnIconButton.
 *
 * @typedef {Object} GnIconButtonProps
 * @property {string} icon - VMK icon key or legacy Phosphor name with ph- prefix
 * @property {string} label - Accessible label (aria-label)
 * @property {string} [variant='secondary'] - primary | secondary | tertiary | ...
 * @property {string} [size='md'] - xxs | xs | sm | md | lg
 * @property {boolean} [disabled=false]
 * @property {string} [type='button']
 */

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

export default defineComponent({
	name: "GnIconButton",
	inheritAttrs: false,
	props: {
		icon: { type: String, required: true },
		label: { type: String, required: true },
		variant: { type: String, default: "secondary" },
		size: { type: String, default: "md" },
		disabled: { type: Boolean, default: false },
		type: { type: String, default: "button" }
	},
	setup(props, { attrs }) {
		return () => h("button", {
			...attrs,
			type: props.type,
			disabled: props.disabled,
			"aria-label": props.label,
			class: cx(
				"btn",
				"btn-icon-only",
				`btn-${normalizeVariant(props.variant)}`,
				normalizeSize(props.size),
				attrs.class
			)
		}, [iconNode(props.icon)]);
	}
});