export class NavMenu extends HTMLElement {
  constructor() {
    super()
    this.attachShadow({mode: 'open'})
    this.language = navigator.language
  }

  connectedCallback() {
    const style = document.createElement('style')
    style.textContent = `
      :host {
        display: flex;
        direction: column;
      }
      h1 {
        width: 100%;
        text-align: center;
        color: #000;
        font-size: 18px;
        margin: 0;
        padding: 5px;
      }
    `
    this.shadowRoot.append(style)
    this.header = document.createElement('h1')
    this.header.innerText = this.pagesText
    this.shadowRoot.append(this.header)
    this.pageList = document.createElement('div')
    this.shadowRoot.append(this.pageList)
  }

  get language() {
    return this._language
  }

  set language(language) {
    this._language = language
  }

  get langEs() {
    return /^es\b/.test(this.language)
  }

  get pagesText() {
    return this.langEs ? 'Páginas' : 'Pages'
  }
}