type Child = Element | Text | string | number

export type Children = Child[]

export function h(tagName: string, attrs: object, ...children: Children): Element {
  let elem = document.createElement(tagName)
  elem = Object.assign(elem, attrs)
  appendChildren(elem, ...children)
  return elem
}

export function s(tagName: string, attrs: object, ...children: Children): Element {
  let elem = document.createElementNS('http://www.w3.org/2000/svg', tagName)
  Object.entries(attrs).forEach(([key, value]) => elem.setAttribute(key, value))
  appendChildren(elem, ...children)
  return elem
}

function appendChildren(elem: Element, ...children: Children) {
  for (const child of children) {
    if (typeof child === 'number')
      elem.append(child.toString())
    else
      elem.append(child)
  }
}

export function concatClassName(attrs: any, className: string): object {
  const existingClassName = 'className' in attrs ? attrs['className'] : undefined
  return { ...attrs, className: `${className} ${existingClassName}` }
}