export default function ProductSelector({ component }) {
  // Select the product dropdown and dropdown items
  const productDropdown = component.querySelector('#product-dropdown');
  const dropdownItems = component.querySelector('#dropdown-items');

  // Expand the menu on click
  if (productDropdown) {
    productDropdown.addEventListener('click', function () {
      productDropdown.classList.toggle('open');
      dropdownItems.classList.toggle('open');
    });
  }

  // Close the dropdown by clicking anywhere else
  document.addEventListener('click', function (e) {
    // Check if the click was outside of the '.product-list' container
    if (!e.target.closest('.product-list')) {
      dropdownItems.classList.remove('open');
    }
  });
}