const voidElements = new Set(['area', 'base', 'br', 'col', 'embed', 'hr', 'img', 'input', 'link', 'meta', 'source', 'track', 'wbr']);

export const raw = (html) => ({ type: 'raw', html });
export const h = (tag, attributes = {}, children = []) => ({
  type: 'element', tag, attributes, children: Array.isArray(children) ? children : [children],
});

export const escapeHtml = (value) => String(value)
  .replaceAll('&', '&amp;').replaceAll('<', '&lt;').replaceAll('>', '&gt;')
  .replaceAll('"', '&quot;').replaceAll("'", '&#39;');

export const render = (node) => {
  if (node == null || node === false) return '';
  if (Array.isArray(node)) return node.map(render).join('');
  if (typeof node === 'string' || typeof node === 'number') return escapeHtml(node);
  if (node.type === 'raw') return node.html;
  const attributes = Object.entries(node.attributes)
    .filter(([, value]) => value !== false && value != null)
    .map(([name, value]) => value === true ? name : `${name}="${escapeHtml(value)}"`)
    .join(' ');
  const opening = attributes ? `<${node.tag} ${attributes}>` : `<${node.tag}>`;
  if (voidElements.has(node.tag)) return opening;
  return `${opening}${node.children.map(render).join('')}</${node.tag}>`;
};