export function renderLogin(onLogin) {
  const loginContainer = document.createElement('div');
  loginContainer.className = 'login-container';

  loginContainer.innerHTML = `
    <div class="login-card">
      <h2 class="login-title">Iniciar Sesión</h2>
      <form id="login-form">
        <div class="form-group">
          <label for="identifier">Usuario o email</label>
          <input type="text" id="identifier" name="identifier" required autocomplete="username">
        </div>
        <div class="form-group">
          <label for="password">Contraseña</label>
          <input type="password" id="password" name="password" required autocomplete="current-password">
        </div>
        <button type="submit" class="login-button">Ingresar</button>
      </form>
      <p id="login-error" class="login-error"></p>
    </div>
  `;

  loginContainer.querySelector('#login-form').addEventListener('submit', (e) => {
    e.preventDefault();
    const email = loginContainer.querySelector('#identifier').value;
    const password = loginContainer.querySelector('#password').value;
    onLogin(email, password);
  });

  return loginContainer;
}