document.addEventListener('DOMContentLoaded', function () {
  const dropdowns = document.querySelectorAll('[data-dropdown]')
  const selectedValue = document.getElementById('selectedValue')

  dropdowns.forEach((dropdown) => {
    const button = dropdown.querySelector('.dropdown__button')

    const items = dropdown.querySelectorAll('.dropdown__item')

    button.addEventListener('click', function (e) {
      dropdown.classList.toggle('open')
    })

    items.forEach((item) => {
      item.addEventListener('click', function () {
        const value = this.textContent
        selectedValue.textContent = value
        dropdown.classList.remove('open')
      })
    })
  })
})