import { doliLogo } from '../services/icons.js';

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

  loginContainer.innerHTML = `
    <div class="login-card">
      <div class="login-brand">
        <div class="login-logo-icon">
          ${doliLogo(44)}
        </div>
      </div>
      <h2 class="login-title">Iniciar sesión</h2>
      <p class="login-subtitle">Accede a tu cuenta para continuar</p>
      <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" placeholder="tu@email.com">
        </div>
        <div class="form-group">
          <label for="password">Contraseña</label>
          <input type="password" id="password" name="password" required autocomplete="current-password" placeholder="••••••••">
        </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;
}