import {
    getAllLines
} from "./lines-rest-api";


async function createCard(product, color, price, image) {
    const cardContainer = document.querySelector('.row.gx-5'); 

    if (image == "") {
        image = "images/iphone_14_pro.png"
    }

    const cardItem = 
    `
    <div class="col-md-6 col-lg-4 col-xxl-3">
            <div class="card">
              <img src="${image}" class="card-img-top" alt="...">
              <div class="card-body">
                <h5 class="card-title">${product}, ${color}</h5>
                <p class="card-text">${price} ₽</p>
              </div>
            </div>
          </div>
    `;

    cardContainer.insertAdjacentHTML('beforeend', cardItem);

}

async function createCards() {
    const data = await getAllLines();
    console.log(data)
    data.forEach(item => {
        createCard(item.product, item.colors.name, item.price, item.image);
    });
}

document.addEventListener('DOMContentLoaded', () => {
    createCards();
});