export class ButtonGroup extends HTMLElement {
  constructor() {
    super()
    this.attachShadow({open: true})
  }

  connectedCallback() {
    const style = document.createElement('style')
    style.value = `
      :host {
        display: flex;
        direction: row-reverse;
        gap: 5px;
      }
      button {
        font-family: sans-serif;
        font-weight: normal;
        background: #111;
        color: #eee;
      }
    `
    this.shadowRoot.appendChild(style)
  }

  addButton(text, cls, handler) {
    const el = document.createElement('button')
    el.innerText = text
    el.classList.add(cls)
    el.addEventListener('click', () => handler)
    this.shadowRoot.appendChild(el)
    return el
  }

  addPrimary(text, handler) {
    this.primary = this.addButton(
      text, 'primary', handler
    )
  }

  addCancel(text, handler) {
    this.cancel = this.addButton(
      text, 'cancel', handler
    )
  }
}