class TabManager {
    constructor(tabContainerId) {
        this.tabContainer = document.getElementById(tabContainerId);
        this.tabLinks = this.tabContainer.querySelectorAll('.tab-link');
        this.tabContents = this.tabContainer.querySelectorAll('.tab-content');

        this.tabLinks.forEach((tabLink) => {
            tabLink.addEventListener('click', (event) => {
                event.preventDefault();
                const selectedTab = event.target.dataset.tabid;
                this.showTab(selectedTab);
            });
        });
    }

    showTab(tabId) {
        this.tabLinks.forEach((tabLink) => {
            const tab = tabLink.dataset.tabid;
            const isActive = tab === tabId;
            tabLink.classList.remove("active");
            if (isActive)
                tabLink.classList.add("active");
        });

        this.tabContents.forEach((tabContent) => {
            const tab = tabContent.dataset.tab;
            const isActive = tab === tabId;
            tabContent.classList.remove("active")
            if (isActive)
                tabContent.classList.add("active")
        });
    }
}