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

const contenedorProductos = document.querySelector("#productos");
const carritoLista = document.querySelector("#carrito");
const totalTexto = document.querySelector("#total");

const carrito = [];

function mostrarProductos() {
  for (const producto of productos) {
    const div = document.createElement("div");

    div.innerHTML = `
      <span>${producto.nombre} - $${producto.precio}</span>
      <button>Agregar al carrito</button>
    `;

    const boton = div.querySelector("button");

    boton.addEventListener("click", () => {
      agregarAlCarrito(producto);
    });

    contenedorProductos.appendChild(div);
  }
}

function agregarAlCarrito(producto) {
  const existente = carrito.find(
    item => item.nombre === producto.nombre
  );

  if (existente) {
    existente.cantidad++;
  } else {
    carrito.push({
      nombre: producto.nombre,
      precio: producto.precio,
      cantidad: 1
    });
  }

  actualizarCarrito();
}

function actualizarCarrito() {
  carritoLista.innerHTML = "";

  let total = 0;

  for (const item of carrito) {
    const li = document.createElement("li");

    li.textContent =
      `${item.nombre} x${item.cantidad} - $${item.precio * item.cantidad}`;

    carritoLista.appendChild(li);

    total += item.precio * item.cantidad;
  }

  totalTexto.textContent = `Total: $${total}`;
}

mostrarProductos();