/**
 * GnNavigationItem - Sidebar navigation item.
 */

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

export default defineComponent({
	name: "GnNavigationItem",
	props: {
		href: { type: String, default: "" },
		icon: { type: String, default: "" },
		active: { type: Boolean, default: false }
	},
	emits: ["click"],
	setup(props, { slots, emit }) {
		const navigation = inject(navigationKey, null);

		const classes = computed(() => cx("navigation-item", { "is-active": props.active }));

		const tag = props.href ? "a" : "button";

		return () => h(tag, {
			class: classes.value,
			href: props.href || undefined,
			type: props.href ? undefined : "button",
			onClick: () => {
				navigation?.close?.();
				emit("click");
			}
		}, [
			props.icon && h("span", { class: "navigation-item-icon" }, [iconNode(props.icon)]),
			h("span", { class: "navigation-item-label" }, slots.default?.())
		]);
	}
});