// Agregar aquí el código javascript

const products = [
    { name: "Teclado", price: 8500 },
    { name: "Mouse", price: 4200 },
    { name: "Monitor", price: 62000 },
    { name: "Auriculares", price: 11000 },
    { name: "Webcam", price: 15500 }
];

const productList = document.getElementById('productList');
const checkout = document.getElementById('checkout');

products.forEach(product => {
    const productDiv = document.createElement('div');
    productDiv.textContent = `${product.name} - $${product.price} `;
    const buyButton = document.createElement('button');
    buyButton.textContent = 'Comprar';
    productDiv.appendChild(buyButton);
    productList.appendChild(productDiv);
});

const cart = new Map();

const renderCart = () => {
    checkout.innerHTML = '';

    if (cart.size === 0) {
        checkout.innerHTML = '<p>Carrito vacío</p>';
        return;
    }

    let totalPrice = 0;

    cart.forEach((quantity, product) => {
        const lineTotal = product.price * quantity;
        totalPrice += lineTotal;

        const itemRow = document.createElement('div');
        itemRow.innerHTML = `
            <div>${product.name} -------- x${quantity}</div>
            <div>$${lineTotal.toLocaleString()}</div>
        `;
        checkout.appendChild(itemRow);
    });

    const totalRow = document.createElement('div');
    totalRow.innerHTML = `<strong>Total: ------------- $${totalPrice.toLocaleString()}</strong>`;
    checkout.appendChild(totalRow);
};

productList.addEventListener('click', (event) => {
    if (event.target.tagName === 'BUTTON') {
        const productDiv = event.target.parentElement;
        const productName = productDiv.textContent.split(' - ')[0];
        const product = products.find(p => p.name === productName);

        if (!product) {
            return;
        }

        const currentQty = cart.get(product) || 0;
        cart.set(product, currentQty + 1);
        renderCart();
    }
});

renderCart();