const customElement = (tag, props = {}) => {
  const element = document.createElement(tag);
  
  if (props.id) element.id = props.id;
  
  if (props.className) element.classList.add(props.className);
  
  if (props.style) Object.assign(element.style, props.style);
  
  if (props.text) element.textContent = props.text;
  
  if (props.attributes) for (const [key, value] of Object.entries(props.attributes)) {
    element.setAttribute(key, value);
  }
  
  if (props.events) for (const [event, handler] of Object.entries(props.events)) {
    element.addEventListener(event, handler);
  }
  
  if (!props.container) {
    document.body.appendChild(element);
    return;
  }
  
  const items = document.querySelectorAll(props.container.target);
  
  if (items.length === 0) {
    console.log(`No elements found using target: ${props.container.target}`);
    return;
  }
  
  switch (props.container.position) {
    case 'before':
      for (const item of items) {
        item.prepend(element.cloneNode(true));
      }
    break;
    case 'insert':
      for (const item of items) {
        item.appendChild(element.cloneNode(true));
      }
    break;
    case 'after':
      for (const item of items) {
        item.append(element.cloneNode(true));
      }
    break;
    default:
      console.log(`Position ${props.container.position} not found. Use before, insert, or after`);
  }
};

/*
  Function for templating html elements ( ! This is a work in progress ! )
  Example:
  
  customElement('h1', {
    id: 'i-have-an-id-officer',
    className: 'best-in-class',
    style: { backgroundColor: 'red' },
    text: 'This is some TEXT!',
    attributes: { 'data-or-dada': 'data' },
    container: {
      target: 'body',
      position: 'insert'
    }
  });
  
  Output -> <h1 id="i-have-an-id-officer" class="best-in-class" style="background-color: red" data-or-dada="data">This is some TEXT!</h1>
*/