text: const bel = require(('bel'))
  const csjs = require('csjs-inject')
  const debug = require('debug')
  
  module.exports = datdot_ui_tab
  
  function datdot_ui_tab({from, arr}, protocol) {
      const widget = 'ui-tab'
      const name = `${from}/${widget}`
      const log = debug(name)
      const sendToParent = protocol(function receive (message) { log(message) })
      const element = bel`
      <nav role="tablist" aria-tab="${from}" class=${css.tablist}>
          ${arr.map( (tab, index) => {
                  if (index === 0) {
                      return bel`<button role="tab" tabindex="0" aria-tab="${tab}" aria-selected="true" class="${css.btn} ${css.current}" onclick=${ (e) => onTrigger(e, tab) }>${tab}</button>`
                  } else {
                      return bel`<button role="tab" tabindex="-1" aria-tab="${tab}" aria-selected="false" class=${css.btn} onclick=${ (e) => onTrigger(e, tab) }>${tab}</button>`
                  }
              })
          }
      </nav>
      `
  
      return element
  
      function onTrigger(e, tab) {
          const logger = log.extend(`${from} > ${tab}`)
          let message = { from, flow: widget, type: 'click', body: tab, active: false}
          const el = e.target
          const childrens = [...element.children]
  
          if (el.classList.contains(css.current)) return
              // add the code below if want to display log on console
              // message.active = true
  
          childrens.forEach( btn => {
              btn.setAttribute('aria-selected', false)
              btn.classList.remove(css.current)
              message.active = false
          })
  
          if ( el.innerText === tab ) {
              el.setAttribute('aria-selected', true)
              el.classList.add(css.current)
              message.active = true
          }
  
          logger('send', message)
          return sendToParent(message)
      }
  
  }
  
  const css = csjs`
  .tablist {
      
  }
  .btn {
      color: #000000;
      background-color: #d9d9d9;
      padding: 15px;
      border: none;
      border-top-left-radius: 8px;
      border-top-right-radius: 8px;
      margin-right: 4px;
      /* outline: #d9d9d9 dotted 1px; */
      cursor: pointer;
      transition: background-color 0.3s ease-in-out;
  }
  .btn:hover {
      background-color: #afafaf;
  }
  .current, .current:hover {
      background-color: #fff;
  }
  `