const wishlist = [
    "Macbook Air M2",
    // TODO: Add more items here
    "Asus TUF A15",
    "Corsair MP600 Pro LPX 1TB SSD",
    "104 keys keyboard",
    "Wireless gaming mouse"
];

/** Challenge:
- Iterate over the wishlist array.
- Dynamically render your wishlist from the array.
- Style the wishlist with CSS.
**/

const wishlistEl = document.querySelector(".wishlist")
const wishlistUl = document.querySelector(".wishlist ul")
const addItemInput = document.querySelector(".add-item__input")
const addItemBtn = document.querySelector(".add-item__btn")

function displayWishlist() {
    wishlist.forEach((item) => {
        // console.log(item)
        addItem(item)
    })
}
displayWishlist()

function inputItem() {
    const itemText = addItemInput.value.trim()
    if (itemText !== '') {
        addItem(itemText)
        addItemInput.value = ''
    }
}
addItemBtn.addEventListener('click', inputItem)

function addItem(item) {
    const li = document.createElement('li')
    li.innerHTML += `
        ${item}
        <button class="wishlist__item-remove" onclick="removeItem(this)">
            Remove
        </button>
    `
    wishlistUl.appendChild(li)
}

function removeItem(button) {
    const li = button.parentElement
    wishlistUl.removeChild(li)
}