// Tabs Component
export class Tabs {
  constructor(onTabChange) {
    this.navTabs = document.querySelectorAll('.nav-tab');
    this.docsTab = document.getElementById('docsTab');
    this.courseTab = document.getElementById('courseTab');
    this.onTabChange = onTabChange;
    this.init();
  }

  init() {
    this.navTabs.forEach(tab => {
      tab.addEventListener('click', () => {
        const tabName = tab.dataset.tab;
        this.switchTab(tabName);
      });
    });
  }

  switchTab(tabName) {
    // Update active tab
    this.navTabs.forEach(t => t.classList.remove('active'));
    const activeTab = Array.from(this.navTabs).find(t => t.dataset.tab === tabName);
    if (activeTab) {
      activeTab.classList.add('active');
    }
    
    // Show/hide tab content
    if (tabName === 'docs') {
      if (this.docsTab) {
        this.docsTab.style.display = 'flex';
        this.docsTab.classList.add('active');
      }
      if (this.courseTab) {
        this.courseTab.style.display = 'none';
        this.courseTab.classList.remove('active');
      }
    } else {
      if (this.docsTab) {
        this.docsTab.style.display = 'none';
        this.docsTab.classList.remove('active');
      }
      if (this.courseTab) {
        this.courseTab.style.display = 'flex';
        this.courseTab.classList.add('active');
      }
      
      if (this.onTabChange) {
        this.onTabChange(tabName);
      }
    }
  }
}