// Welcome to the Lightview Playground! 🎉
// Click an example button above, or edit this code and click Run.

const { signal, tags, $ } = Lightview;
const { div, h1, p, button } = tags;

const count = signal(0);

const app = div({ style: 'text-align: center; padding: 2rem;' },
    h1({ style: 'margin: 0 0 1rem;' }, '🎯 Counter'),
    p({ style: 'font-size: 3rem; margin: 0;' }, 
        () => count.value
    ),
    div({ style: 'display: flex; gap: 1rem; justify-content: center; margin-top: 1rem;' },
        button({ 
            onclick: () => count.value--,
            style: 'padding: 0.75rem 1.5rem; font-size: 1.25rem; cursor: pointer;'
        }, '−'),
        button({ 
            onclick: () => count.value++,
            style: 'padding: 0.75rem 1.5rem; font-size: 1.25rem; cursor: pointer;'
        }, '+')
    )
);

$('#playground-preview').insert(app);