import { createTopBar } from '../components/topbar.js';

export const pageMeta = { id: 'device-camera-view', title: 'Подключить через камеру' };

export function render({navigate, chrome}) {
  const screen = document.createElement('section');
  screen.className = 'stack';

  chrome?.setTopbar(createTopBar({
      title: 'Подключить через камеру',
      back: { label: '←', onClick: () => navigate('connect-device-view') },
    }));

  const frame = document.createElement('div');
  frame.className = 'camera-shell';
  frame.innerHTML = `
    <div class="camera-placeholder">Область камеры (демо-заглушка)</div>
    <div class="camera-frame"></div>
    <div class="camera-hint">Логика сканирования пока не реализована</div>
  `;

  screen.append(frame);
  return screen;
}