const product=[
    {
        id: 0,
        image: '',
        title: 'Graphic T-Shirt',
        price: 20
    },
    {
        id: 1,
        image: '',
        title: 'Classic T-shirt',
        price: 15
    },
    {
        id: 2,
        image: '',
        title: 'hoodie',
        price: 35
    },
    {
        id: 3,
        image: '',
        title: 'Jeans',
        price: 40
    },

]
const catagories = [...new set(product.map((item)=> {return item}))] 

document.getElementById('searchBar').addEventListener('keyup', (e)=> {
    const searchData = e.target.value.tolowerCase();
    const filterData = catagories.filter((item)=> {
        return(
            item.title.tolowerCase().includes(searchData)
        )
    })
    displayItem(filterData)
});

const displayItem = (items)=> {
    document.getElementById('productContainer').innerHTML = items.map((item)=> {
        var {image, title, price} = item;
        return(
            `<div class='box'>
                <div class='img-box'>
                    <img class='images' src='${image}'></img>
                </div>
                <div class='bottom'>
                <p>${title}</p>
                <h2>$${price}.00</h2>
                <button>Add to cart</button>
            </div>`
        )
    }).join('')
};
displayItem(catagories);