<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Desestructuración y Spread en JavaScript</title>
  <style>
    body { font-family: Arial, Helvetica, sans-serif; padding: 25px; background: #f8fafc; }
    .card-perfil { max-width: 500px; background: white; border: 1px solid #cbd5e1; border-radius: 8px; padding: 22px; }
    .info-bloque { background: #f1f5f9; border-left: 4px solid #0284c7; padding: 12px; border-radius: 4px; margin: 15px 0; font-family: monospace; white-space: pre-wrap; }
    .controles { display: flex; gap: 8px; }
    input[type="text"] { flex: 1; padding: 8px 12px; border: 1px solid #cbd5e1; border-radius: 6px; }
    button { padding: 8px 14px; background: #0284c7; color: white; border: none; border-radius: 6px; cursor: pointer; font-weight: bold; }
    button:hover { background: #0369a1; }
  </style>
</head>
<body>

  <div class="card-perfil">
    <h3 style="margin-top: 0; color: #0f172a;">Perfil Académico Dinámico</h3>

    <div class="controles">
      <input type="text" id="nuevaHabilidad" placeholder="Nueva habilidad (ej: TypeScript)...">
      <button onclick="agregarConSpread()">+ Agregar (Spread)</button>
    </div>

    <div class="info-bloque" id="vista-objeto">Generando perfil...</div>

    <script>
      let perfilEstudiante = {
        id: 104,
        nombre: "Andrés Felipe Díaz",
        carrera: "Desarrollo Web Fullstack",
        habilidades: ["HTML5", "CSS3", "JavaScript"]
      };

      function renderizar() {
        // Desestructuración de propiedades del objeto
        const { nombre, carrera, habilidades } = perfilEstudiante;

        const contenedor = document.getElementById('vista-objeto');
        contenedor.textContent = 
`Estudiante: ${nombre}
Programa: ${carrera}
Habilidades (${habilidades.length}): ${habilidades.join(', ')}

Objeto JSON en memoria:
${JSON.stringify(perfilEstudiante, null, 2)}`;
      }

      function agregarConSpread() {
        const input = document.getElementById('nuevaHabilidad');
        const nuevaSkill = input.value.trim();

        if (nuevaSkill === "") {
          alert("Por favor escribe una habilidad.");
          return;
        }

        // Clonación inmutable del objeto y del array con operador spread
        perfilEstudiante = {
          ...perfilEstudiante,
          habilidades: [...perfilEstudiante.habilidades, nuevaSkill]
        };

        input.value = "";
        input.focus();
        renderizar();
      }

      renderizar();
    </script>
  </div>

</body>
</html>