/**
 * GnChip - Compact removable tag/filter chip.
 */

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

export default defineComponent({
	name: "GnChip",
	props: {
		variant: { type: String, default: "default" },
		size: { type: String, default: "md" },
		icon: { type: String, default: "" },
		removable: { type: Boolean, default: false }
	},
	emits: ["remove"],
	setup(props, { emit, slots }) {
		const classes = computed(() => cx("chip", `chip-${props.variant}`, `chip-${props.size}`));

		const removeButton = () => {
			if (!props.removable) return null;
			return h("button", {
				class: "chip-remove",
				type: "button",
				"aria-label": "Remove",
				onClick: event => {
					event.stopPropagation();
					emit("remove", event);
				}
			}, [iconNode("ph-x")]);
		};

		return () => h("span", { class: classes.value }, [
			props.icon && iconNode(props.icon),
			slots.default?.(),
			removeButton()
		]);
	}
});