import * as scene from '../../../core/scene.js';
import * as audio from '../../../core/audio.js';
import { t } from '../../../core/i18n.js';
import { emoji } from '../../../core/theme.js';

export function mountRoom(el, params) {
  el.innerHTML = `
    <div style="display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:var(--s-4);">
      <div style="font-size:24px;font-weight:700;">${t('game.ludo')}</div>
      <div style="color:var(--text-secondary);">${t('play.searching')}</div>
      <div class="pulse" style="width:60px;height:60px;border-radius:50%;border:3px solid var(--ludo-primary);display:flex;align-items:center;justify-content:center;">${emoji('ludo_hex', '⬡', 32)}</div>
      <button class="btn btn-secondary" id="cancel-btn">${t('play.cancel')}</button>
    </div>
  `;
  el.querySelector('#cancel-btn').addEventListener('click', () => { audio.play('click'); scene.pop(); });
}
