import { computed, reactive } from 'vue'

const state = reactive(new Map())

export function useTabs(group: string) {
	if (!state.has(group)) {
		state.set(group, reactive({ currentTab: undefined }))
	}

	const currentTab = computed({
		get: () => state.get(group).currentTab,
		set: (val) => {
			state.get(group).currentTab = val
		},
	})

	return { currentTab }
}