export function initTabs() {
    try {
        const tabs = document.querySelectorAll('.tabs');
        tabs.forEach(tab => {
            const tabBtns = tab.querySelectorAll('.tab-btn');
            tabBtns.forEach(tabBtn =>
                tabBtn.addEventListener('click', (e) => {
                        // Make the current button active
                        tabBtns.forEach(btn => btn.classList.remove('bg-white'));
                        tabBtn.classList.add('bg-white');

                        // Hide all other tabs
                        const tabContents = tab.querySelectorAll('.tab-content');
                        tabContents.forEach(content => content.removeAttribute('data-show'));

                        // Show the target tab
                        const targetContent = tabBtn.dataset.target;
                        if (targetContent) {
                            const contentTabData = `[data-tab="${targetContent}"]`;
                            const tabContent = tab.querySelector(contentTabData);
                            if (tabContent) {
                                tabContent.setAttribute('data-show', '')
                            }
                        }
                    }
                )
            );
        })
    } catch (e) {
        console.error(e)
    }
}