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

export default defineComponent({
	name: "GnTooltip",
	props: {
		text: { type: String, default: "" }
	},
	setup(props, { attrs, slots }) {
		const open = ref(false);

		return () => h("span", {
			...attrs,
			class: cx("tooltip", { "is-open": open.value }, attrs.class),
			onFocusin: () => {
				open.value = true;
			},
			onFocusout: () => {
				open.value = false;
			}
		}, [
			slots.default?.(),
			h("span", { class: "tooltip-panel", role: "tooltip" }, slots.panel?.() || props.text)
		]);
	}
});