function loadComponent(containerId, filePath, callback) {
  fetch(filePath)
    .then(response => {
      if (!response.ok) {
        throw new Error(`HTTP error! status: ${response.status}`);
      }
      return response.text();
    })
    .then(data => {
      if (containerId) {
        document.getElementById(containerId).innerHTML = data;
      }
      if (callback) callback();
    })
    .catch(error => console.error('Error loading component:', error));
}

function showTab(tab) {
  document.getElementById('subscriptions-content').classList.add('hidden');
  document.getElementById('extra-job-ads-content').classList.add('hidden');

  document.getElementById('subscriptions-tab').classList.remove('custom-tab-active');
  document.getElementById('extra-job-ads-tab').classList.remove('custom-tab-active');
  document.getElementById('subscriptions-tab').classList.add('custom-tab-inactive');
  document.getElementById('extra-job-ads-tab').classList.add('custom-tab-inactive');

  document.getElementById('buttons-container').innerHTML = '';

  if (tab === 'subscriptions') {
    const planCanceled = false; // Set true or false
    showSubscriptionTab(planCanceled);
  } else if (tab === 'extra-job-ads') {
    showExtraJobAdsTab();
  }
}

document.addEventListener("DOMContentLoaded", () => {
  loadComponent('header-container', 'components/Header.html');
  loadComponent('tabs-container', 'components/Tabs.html');
  loadComponent('subscriptions-content', 'components/PlanDetail.html');
  loadComponent('extra-job-ads-content', 'components/ExtraJobAds.html', () => {
    
    generateJobAds(2, 1); //Active-Inactive Jobads
  });
  loadComponent('buttons-container', 'components/Button.html', () => {
    showTab('subscriptions');
  });
});
