component Dropdown {
  props {
    @event toggle = function
    @event open = function
    @event close = function
    @event select = function
    size = "default"
    color = "primary"
    label = "Open menu"
    items = []
    placement = "end"
    class = ""
  }

  functions {
    function toggleMenu(event) {
      $emit("toggle", { open: event.currentTarget.open })
      $emit(event.currentTarget.open ? "open" : "close", { source: "trigger" })
    }

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

  view {
    <details class="wire-dropdown wire-dropdown--{placement} wire-next--color-{color} wire-next--size-{size} {class}" data-wrn-dropdown @toggle="toggleMenu($event)">
      <summary aria-label="{label}">
        <slot name="trigger" />
        <span class="wire-dropdown__chevron icon-[lucide--chevron-down]" aria-hidden="true"></span>
      </summary>
      <div class="wire-dropdown__panel" role="menu" aria-label="{label}">
        <slot name="header" />
        {#each items as item}
          {#if item.type === "divider"}
            <hr />
          {:else}
            {#if item.type === "header"}
              <span class="wire-dropdown__heading">{item.label}</span>
            {:else}
              <a class="wire-dropdown__item {item.danger ? 'wire-dropdown__item--danger' : ''}" href="{item.href || '#'}" target="{item.target || ''}" rel="{item.rel || ''}" role="menuitem" @click="selectItem(item)">
                {#if item.icon}<span class="{item.icon}" aria-hidden="true"></span>{/if}
                <span><strong>{item.label}</strong>{#if item.description}<small>{item.description}</small>{/if}</span>
                {#if item.external}<span class="icon-[lucide--arrow-up-right]" aria-hidden="true"></span>{/if}
              </a>
            {/if}
          {/if}
        {/each}
        <slot name="footer" />
      </div>
    </details>
  }
}