const wishNameInput = document.getElementById("wishName")
const wishDescriptionInput = document.getElementById("wishDescription")
const wishLinkInput = document.getElementById("wishLink")

const wishlistEl = document.querySelector(".wishlist")

const addWishBtn = document.getElementById("addWish")

const wishlist = [
  {
      name: "Books",
      description: "I love to read so need more books!",
      link: "https://www.amazon.in/"
  },
  {
      name: "Headphone",
      description: "Nirvanaa 751 ANC Wireless Headphone",
      link: "https://www.boat-lifestyle.com/products/nirvana-751-anc-headphone"
  }
];

function renderList(list){
    let listEl = ""
    list.map((list, index) =>{
        listEl += `
        <div class='wishlist-box'>
            <div>
                <h2><a href='${list.link}' target='_blank'>${list.name}</a></h2>
                <p>${list.description}</p>
            </div>
            <div class="delete" onclick="deleteWish(${index})">❌</div>
        </div>
        `
    })
    wishlistEl.innerHTML = listEl
}

renderList(wishlist)

addWishBtn.addEventListener('click', function(){
    if(!wishNameInput.value || !wishDescriptionInput.value || !wishLinkInput.value) return
    const newWish = {
        name: wishNameInput.value,
        description: wishDescriptionInput.value,
        link: wishLinkInput.value
    }
    wishlist.push(newWish)
    renderList(wishlist)
    wishNameInput.value = wishDescriptionInput.value = wishLinkInput.value = ""
})

function deleteWish(index){
    wishlist.splice(index, 1)
    renderList(wishlist)
}