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

export default defineComponent({
	name: "GnBadge",
	inheritAttrs: false,
	props: {
		variant: { type: String, default: "primary" },
		outline: { type: Boolean, default: false },
		icon: { type: String, default: "" },
		size: { type: String, default: "" }
	},
	setup(props, { attrs, slots }) {
		return () => {
			const variant = normalizeVariant(props.variant);
			const hasIcon = Boolean(props.icon);

			let variantClass;
			if (props.outline && variant === "primary") {
				variantClass = "badge-primary-outline";
			} else if (props.outline) {
				variantClass = `badge-${variant} badge-outline`;
			} else {
				variantClass = `badge-${variant}`;
			}

			return h("span", {
				...attrs,
				class: cx(
					"badge",
					variantClass,
					{
						"with-icon": hasIcon,
						"badge-sm": props.size === "sm",
						"badge-lg": props.size === "lg"
					},
					attrs.class
				)
			}, [
				iconNode(props.icon),
				slots.default?.()
			]);
		};
	}
});