const productos = [
    { nombre: "Teclado", precio: 8500 },
    { nombre: "Mouse", precio: 4200 },
    { nombre: "Monitor", precio: 62000 },
    { nombre: "Auriculares", precio: 11000 },
    { nombre: "Webcam", precio: 15500 }
];

// El carrito es un array de objetos { nombre, precio, cantidad }, que
// inicializamos vacío fuera de las funciones (para que sea global):
const carrito = [];

const listaProductos = document.querySelector("#productos");

function actualizarCarrito() {
    const totalParrafo = document.querySelector("#total");
    const listaCarrito = document.querySelector("#carrito");
    listaCarrito.innerHTML = "";

    // Calculamos el total mientras construimos la lista.
    let total = 0;

    for (const item of carrito) {
        const subtotal = item.precio * item.cantidad;
        total += subtotal;

        const li = document.createElement("li");
        li.textContent = `${item.nombre} x${item.cantidad} — $${subtotal.toLocaleString()}`;
        listaCarrito.appendChild(li);
    }

    totalParrafo.textContent = `Total: $${total.toLocaleString()}`;
}

function agregarAlCarrito(producto) {
    // Buscamos si el producto ya está en el carrito.
    const itemExistente = carrito.find(item => item.nombre === producto.nombre);

    if (itemExistente) {
        // Si ya existe, solo incrementamos la cantidad.
        itemExistente.cantidad++;
    } else {
        // Si no existe, lo agregamos manualmente con cantidad 1,
        // copiando las propiedades una por una.
        carrito.push({
            nombre: producto.nombre,
            precio: producto.precio,
            cantidad: 1
        });
    }

    actualizarCarrito();
}

// Construimos la lista de productos con un botón por cada uno.
for (const producto of productos) {
  const listaProductos = document.querySelector("#productos");
  const card = document.createElement("div");
  card.className = "product-card";
  card.innerHTML = `
    <div>
      <p class="product-name">${producto.nombre}</p>
      <p class="product-price">$${producto.precio.toLocaleString()}</p>
    </div>
    <button class="btn-add">+ Agregar</button>
  `;
  card.querySelector(".btn-add").addEventListener("click", () => agregarAlCarrito(producto));
  listaProductos.appendChild(card);
}

actualizarCarrito();