/**
 * GnTabPanel - Panel container for a tab. Must be used inside GnTabs slots.panels.
 */

import { defineComponent, h, inject, onMounted } from "vue";
import { tabsKey } from "./GnTabs.js";

export default defineComponent({
	name: "GnTabPanel",
	props: {
		name: { type: [String, Number], required: true }
	},
	setup(props, { slots }) {
		const tabs = inject(tabsKey, null);

		onMounted(() => {
			tabs?.registerPanel(props.name);
		});

		return () => {
			if (!tabs) return null;
			const active = tabs.isActive(props.name);

			return h("div", {
				class: ["tab-panel", { "tab-panel-active": active }],
				role: "tabpanel",
				hidden: !active
			}, slots.default?.());
		};
	}
});