component SegmentedButtonGroup {
  props {
    label = "Options"
    items = []
    active = ""
    size = "md"
    fullWidth = false
    class = ""
  }

  state current = active

  view {
    <div
      class="wire-segmented-group {fullWidth ? 'wire-segmented-group--full' : ''} wire-segmented-group--{size} {class}"
      role="tablist"
      aria-label="{label}"
    >
      {#each items as item, index}
        <button
          type="button"
          role="tab"
          aria-selected="{current === item.value}"
          disabled="{item.disabled}"
          class="wire-segmented-group__button"
          class:wire-segmented-group__button--active='{current === item.value}'
          @click="current = item.value"
        >
          {#if item.icon}
            <span class="wire-segmented-group__icon {item.icon}" aria-hidden="true"></span>
          {/if}

          <span class="wire-segmented-group__label">{item.label}</span>

          {#if item.badge}
            <span class="wire-segmented-group__badge">{item.badge}</span>
          {/if}
        </button>
      {:empty}
        <span class="wire-segmented-group__empty">No options available</span>
      {/each}
    </div>
  }
}