import { ref } from 'vue';

export function useTabHandler(initialTab: string | null = null) {
    const activeTab = ref<string | null>(initialTab);
    const displayedTabs = ref<string[]>(initialTab ? [initialTab] : []);

    const setActiveTab = (tabName: string) => {
        activeTab.value = tabName;
        if (!displayedTabs.value.includes(tabName)) {
            displayedTabs.value.push(tabName);
        }
    };

    const isActiveTab = (tabName: string) => {
        return activeTab.value === tabName;
    };

    const showTabContent = (tabName: string) => {
        return displayedTabs.value.includes(tabName);
    };

    return {
        activeTab,
        displayedTabs,
        setActiveTab,
        isActiveTab,
        showTabContent
    };
}
