/**
 * GnElementCard — compact vertical icon-label tile.
 *
 * Figma: Element Card.
 *
 * @typedef {Object} GnElementCardProps
 * @property {string} label
 * @property {string} [icon] - VMK icon key or legacy Phosphor name (ph-*).
 * @property {string} [badge] - Optional small badge text (e.g. "Pro").
 * @property {boolean} [selected=false]
 * @property {boolean} [disabled=false]
 * @property {string} [href='']
 */

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

export default defineComponent({
	name: "GnElementCard",
	inheritAttrs: false,
	props: {
		label: { type: String, required: true },
		icon: { type: String, default: "" },
		badge: { type: String, default: "" },
		selected: { type: Boolean, default: false },
		disabled: { type: Boolean, default: false },
		href: { type: String, default: "" }
	},
	emits: ["select", "update:selected"],
	setup(props, { attrs, slots, emit }) {
		return () => {
			const tag = props.href ? "a" : "button";

			return h(tag, {
				...attrs,
				class: cx(
					"element-card",
					{
						"is-selected": props.selected,
						"is-disabled": props.disabled
					},
					attrs.class
				),
				href: props.href || undefined,
				type: props.href ? undefined : "button",
				disabled: props.disabled || undefined,
				onClick: () => {
					if (!props.disabled) {
						emit("update:selected", !props.selected);
						emit("select");
					}
				}
			}, [
				props.badge && h("span", { class: "element-card__badge" }, props.badge),
				h("span", { class: "element-card__icon" }, slots.icon?.() || iconNode(props.icon)),
				h("span", { class: "element-card__label" }, slots.label?.() || props.label)
			]);
		};
	}
});