component Footer {
  props {
    @event select = function
    @event action = function
    size = "default"
    color = "primary"
    label = "Footer navigation"
    items = []
    columns = 3
    maxWidth = "compact"
    copyright = ""
    class = ""
  }

  functions {
    function groupedItems() {
      const groups = []
      let group = null
      items.forEach((item) => {
        if (item.type === "header") {
          group = {
            heading: item,
            links: []
          }
          groups.push(group)
          return
        }
        if (!group) {
          group = {
            heading: null,
            links: []
          }
          groups.push(group)
        }
        group.links.push(item)
      })
      return groups
    }

    function selectItem(item) {
      $emit(item.type === "action" ? "action" : "select", {
        item: item,
        value: item.value || ""
      })
    }
  }

  view {
    <footer class="wire-footer wire-footer--width-{maxWidth} wire-next--color-{color} wire-next--size-{size} wire-footer--columns-{columns} {class}">
      <div class="wire-footer__grid">
        <div class="wire-footer__pre">
          <slot name="pre-footer" />
        </div>

        <nav class="wire-footer__links" aria-label="{label}">
          {#each groupedItems() as group}
            <section class="wire-footer__column">
              {#if group.heading}
                <strong class="wire-footer__heading">{group.heading.label}</strong>
              {/if}
              <div class="wire-footer__column-links">
                {#each group.links as item}
                  <a class="wire-footer__link wire-footer__link--{item.type || 'link'}" href="{item.href || '#'}" target="{item.target || ''}" rel="{item.rel || ''}" @click="selectItem(item)">
                    {#if item.icon}<span class="{item.icon}" aria-hidden="true"></span>{/if}
                    <span>{item.label}</span>
                    {#if item.external}<span aria-hidden="true">↗</span>{/if}
                  </a>
                {/each}
              </div>
            </section>
          {/each}
        </nav>

        <div class="wire-footer__post">
          <slot name="post-footer" />
        </div>
      </div>

      {#if copyright}
        <div class="wire-footer__bottom">
          <div class="wire-footer__copyright-left">
            <slot name="copyright-left" />
          </div>
          <div class="wire-footer__copyright">{copyright}</div>
          <div class="wire-footer__copyright-right">
            <slot name="copyright-right" />
          </div>
        </div>
      {:else}
        <div class="wire-footer__bottom wire-footer__bottom--slots">
          <div class="wire-footer__copyright-left">
            <slot name="copyright-left" />
          </div>
          <div class="wire-footer__copyright-right">
            <slot name="copyright-right" />
          </div>
        </div>
      {/if}
    </footer>
  }
}