// ── Theme picker ──

import { $ } from './util.js';

const picker = $('theme-picker');
const list = $('theme-list');

if (list) {
    for (const [key, t] of Object.entries(window.themes)) {
        const btn = document.createElement('button');
        btn.className = 'flex items-center gap-2.5 w-full px-2 py-1.5 text-left text-xs text-t-muted hover:text-t-bright transition-colors rounded';
        btn.dataset.themeDot = key;
        btn.innerHTML = `<span class="w-3 h-3 rounded-full shrink-0 border border-t-border" style="background:${t.vars['--t-accent']}"></span>
            <span class="font-pixel text-[10px]">${t.label}</span>`;
        btn.onclick = () => { window.applyTheme(key); window._renderBoard?.(); };
        list.appendChild(btn);
    }
}

window.applyTheme(localStorage.getItem('hyprcrd-theme') || 'slate');

if (picker) {
    $('theme-toggle')?.addEventListener('click', () => picker.classList.toggle('open'));
    document.addEventListener('click', e => { if (!picker.contains(e.target)) picker.classList.remove('open'); });
}