text: const bel = require('bel')
  const styleSheet = require('./supportCSSStyleSheet')
  module.exports = header
  
  function header ({count = 1, label, content, ui, theme}) {
      // insert CSS style
      const customStyle = theme ? theme.style : ''
      // set CSS variables
      if (theme && theme.props) { 
          var {size, color, bgColor, padding, opacity, marginBottom, 
              badgeSize, badgeColor, badgeBgColor, badgeWeight, 
          } = theme.props
      }
      // UI view
      function layout(style) {
          // create custom html tag element
          const e = document.createElement('i-header')
          const root = e.attachShadow({mode: 'closed'})
          const badge = bel`<span class="badge">${count}</span>`
          const h1 = bel`<h1 aria-label="${label}">${ui === 'help-modal' ? badge : null}${content}</h1>`
          e.dataset.ui = ui
          styleSheet(root, style)
          root.append(h1)
          return e 
      }
      
      const style = `
      :host(i-header) {
          --modal-header-bgColor: ${bgColor ? bgColor : 'var(--color-black)'};
          --modal-header-padding: ${padding ? padding : '0'};
          --opacity: 0;
          display: grid;
          justify-content: center;
          background-color: hsla( var(--modal-header-bgColor), var(--opacity) );
          padding: var(--modal-header-padding);
      }
      :host(i-header) h1 {
          --modal-header-color: ${color ? color : 'var(--primary-color)'};
          --modal-header-size: ${size ? size : 'var(--size22)'};
          color: hsl( var(--modal-header-color) );
          font-size: var(--modal-header-size);
          margin: 0;
      }
      :host(i-header[data-ui="default"]) {
      }
      :host(i-header[data-ui="step-modal"]) {
          --modal-header-bgColor: ${bgColor ? bgColor : 'var(--color-greyF2)'};
          --modal-header-padding: ${padding ? padding : '20px 0'};
          --opacity: ${opacity ? opacity : '1'};
      }
      :host(i-header[data-ui="action-modal"]) {
          margin-bottom: ${marginBottom ? marginBottom : '30px'};
      }
      :host(i-header[data-ui="help-modal"]) {
          margin-bottom: ${marginBottom ? marginBottom : '12px'};
          justify-content: left;
      }
      :host(i-header[data-ui="help-modal"]) h1 {
          --modal-header-size: ${size ? size : 'var(--size16)'};
          display: grid;
          grid-template-rows: auto;
          grid-template-columns: 24px auto;
          align-items: center;
      }
      :host(i-header[data-ui="help-modal"]) .badge {
          --badgeSize: ${badgeSize ? badgeSize : 'var(--size14)'};
          --badgeWeight: ${badgeWeight ? badgeWeight : 'var(--weight800)'};
          --badgeColor: ${badgeColor ? badgeColor : 'var(--color-white)'};
          --badgeBgColor: ${badgeBgColor ? badgeBgColor : 'var(--primary-color)'};
          display: flex;
          width: 20px;
          height: 20px;
          font-size: var(--badgeSize);
          font-weight: var(--badgeWeight);
          color: hsl( var(--badgeColor) );
          background-color: hsl( var(--badgeBgColor) );
          border-radius: 50%;
          justify-content: center;
          align-items: center;
      }
      ${customStyle}
      `
      return layout(style)
  }
  
  