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(tabsConfig, activeTab) {
  // Hide all content sections and reset tab classes
  tabsConfig.forEach(tab => {
      document.getElementById(tab.contentId).classList.add('hidden');
      document.getElementById(tab.tabId).classList.remove('custom-tab-active');
      document.getElementById(tab.tabId).classList.add('custom-tab-inactive');
  });

  // Show the selected content section and activate the tab
  const activeConfig = tabsConfig.find(tab => tab.name === activeTab);
  document.getElementById(activeConfig.contentId).classList.remove('hidden');
  document.getElementById(activeConfig.tabId).classList.add('custom-tab-active');
  document.getElementById(activeConfig.tabId).classList.remove('custom-tab-inactive');

  // Load buttons for the active tab
  document.getElementById('buttons-container').innerHTML = '';
  loadComponent('buttons-container', activeConfig.buttonFile, () => {
      document.getElementById('button-text').innerText = activeConfig.buttonText;
      const buttonElement = document.getElementById('button-element');
      buttonElement.classList.add('bg-black', 'text-white');
      buttonElement.innerHTML += activeConfig.buttonIcon;
  });

  // Update content based on the active tab
  if (activeTab === 'subscriptions') {
      updateNoSubscriptionContent('You are not subscribed to any plan lorem ipsum dolor sit amet', 'Generic description talking about the benefits of subscribing lorem ipsum', 'path/to/subscription-illustration.png');
  } else if (activeTab === 'extra-job-ads') {
      updateNoSubscriptionContent('You don\'t have any extra job ads at the moment lorem ipsum', 'Generic description talking about the benefits of extra job ads lorem pisum', 'path/to/extra-job-ads-illustration.png');
  }
}

function initializePage(tabsConfig) {
  document.addEventListener("DOMContentLoaded", () => {
      loadComponent('header-container', 'components/Header.html');
      loadComponent('tabs-container', 'components/Tabs.html', () => {
          tabsConfig.forEach(tab => {
              document.getElementById(tab.tabId).addEventListener('click', () => showTab(tabsConfig, tab.name));
          });
      });
      tabsConfig.forEach(tab => {
          loadComponent(tab.contentId, tab.contentFile);
      });
      loadComponent('buttons-container', 'components/Button.html', () => {
          // Show the first tab by default
          showTab(tabsConfig, tabsConfig[0].name);
      });
  });
}

function updateNoSubscriptionContent(title, description, imagePath) {
  document.getElementById('no-subscription-title').innerText = title;
  document.getElementById('no-subscription-description').innerText = description;
  document.getElementById('no-subscription-image').src = imagePath;
}
