component AvatarGroup {
  outputs {
    overflow(payload: { sourceEvent?: Event; value: string | number | boolean | null | object; [key: string]: string | number | boolean | null | object } | string | number | boolean | null | object[])
  }

  props {
    items: unknown[] = []
    size: string = "md"
    color: string = "primary"
    variant: string = "solid"
    shape: string = "circle"
    layout: string = "stack"
    maxVisible: number = 4
    columns: number = 3
    borderColor: string = ""
    showTooltips: boolean = true
    overflowLabel: string = "Show remaining members"
    class: string = ""

}

  state overflowOpen: boolean = false

  functions {
    shared function visibleMembers() {
      return items.slice(0, Number(maxVisible))
    }

    shared function hiddenMembers() {
      return items.slice(Number(maxVisible))
    }

    client function toggleOverflow() {
      overflowOpen = !overflowOpen
      output.overflow({
        component: "AvatarGroup",
        open: overflowOpen,
        hiddenCount: hiddenMembers().length
      })
    }
  }

  view {
    <div
      {...attrs}
      class="wrn-component wrn-next--avatar-group {class}"
      data-wrn-avatar-group
      data-layout="{layout}"
      data-shape="{shape}"
      data-size="{size}"
      style="--wrn-avatar-group-columns:{columns}; --wrn-avatar-group-ring:{borderColor || 'var(--wrn-color-bg)'}"
      role="group"
      aria-label="Avatar group"
    >
      <div
        class="wrn-next__avatar-group-members"
      >
        {#each visibleMembers() as item}
          <span
            class="wrn-next__avatar-group-member"
            data-size="{item.size || size}"
            data-shape="{item.shape || shape}"
            data-color="{item.color || color}"
            data-variant="{item.variant || variant}"
            tabindex="{showTooltips && (item.tooltip || item.name) ? '0' : '-1'}"
            aria-label="{item.name || item.alt || item.initials || 'Group member'}"
          >
            <span
              class="wrn-next__avatar-group-avatar"
            >
              {#if item.src}
                <img
                  src="{item.src}"
                  alt="{item.alt || item.name || ''}"
                  loading="lazy"
                />
              {:else if item.initials}
                <span
                  aria-hidden="true"
                >
                  {item.initials}
                </span>
              {:else}
                <span
                  class="icon-[lucide--user-round]"
                  aria-hidden="true"
                >
                </span>
              {/if}
            </span>

            {#if showTooltips && (item.tooltip || item.name)}
              <span
                class="wrn-next__avatar-group-tooltip"
                role="tooltip"
              >
                {item.tooltip || item.name}
              </span>
            {/if}
          </span>
        {/each}

        {#if hiddenMembers().length > 0}
          <span
            class="wrn-next__avatar-group-overflow"
          >
            <button
              type="button"
              class="wrn-next__avatar-group-overflow-button"
              aria-label="{overflowLabel}"
              aria-expanded="{overflowOpen ? 'true' : 'false'}"
              @click="toggleOverflow(event)"
            >
              +{hiddenMembers().length}
            </button>

            <span
              class="wrn-next__avatar-group-menu"
              role="menu"
              data-show="overflowOpen"
              aria-hidden="{overflowOpen ? 'false' : 'true'}"
            >
              {#each hiddenMembers() as item}
                <span
                  class="wrn-next__avatar-group-menu-item"
                  role="menuitem"
                >
                  <span
                    class="wrn-next__avatar-group-menu-avatar"
                  >
                    {#if item.src}
                      <img
                        src="{item.src}"
                        alt=""
                        loading="lazy"
                      />
                    {:else}
                      <span>{item.initials || '?'}</span>
                    {/if}
                  </span>
                  <span>{item.name || item.alt || item.initials || 'Team member'}</span>
                </span>
              {/each}
            </span>
          </span>
        {/if}
      </div>
    </div>
  }

  style {
    /* --- Avatar group -------------------------------------------------------- */
    .wrn-next--avatar-group {
      --wrn-avatar-group-size: 3rem;
      position: relative;
      display: inline-flex;
      width: fit-content;
      max-width: 100%;
    }

    .wrn-next--avatar-group[data-size="xs"] {
      --wrn-avatar-group-size: 1.75rem;
    }

    .wrn-next--avatar-group[data-size="sm"] {
      --wrn-avatar-group-size: 2.25rem;
    }

    .wrn-next--avatar-group[data-size="md"],
    .wrn-next--avatar-group[data-size="default"] {
      --wrn-avatar-group-size: 3rem;
    }

    .wrn-next--avatar-group[data-size="lg"] {
      --wrn-avatar-group-size: 4rem;
    }

    .wrn-next--avatar-group[data-size="xl"] {
      --wrn-avatar-group-size: 5rem;
    }

    .wrn-next__avatar-group-members {
      display: flex;
      align-items: center;
    }

    .wrn-next--avatar-group[data-layout="stack"] .wrn-next__avatar-group-member,
    .wrn-next--avatar-group[data-layout="stack"] .wrn-next__avatar-group-overflow {
      margin-left: calc(var(--wrn-avatar-group-size) * -0.22);
    }

    .wrn-next--avatar-group[data-layout="stack"] :first-child {
      margin-left: 0;
    }

    .wrn-next--avatar-group[data-layout="grid"] .wrn-next__avatar-group-members {
      display: grid;
      grid-template-columns: repeat(var(--wrn-avatar-group-columns), var(--wrn-avatar-group-size));
      gap: 0.65rem;
    }

    .wrn-next__avatar-group-member,
    .wrn-next__avatar-group-overflow {
      --wrn-avatar-group-color: var(--wrn-color-primary);
      position: relative;
      display: inline-grid;
      width: var(--wrn-avatar-group-size);
      height: var(--wrn-avatar-group-size);
      flex: none;
      place-items: center;
      border-radius: 999px;
      outline: none;
      transition:
        z-index var(--wrn-motion-fast),
        transform var(--wrn-motion-base) var(--wrn-ease-emphasized);
    }

    .wrn-next__avatar-group-member[data-color="secondary"] {
      --wrn-avatar-group-color: #737373;
    }

    .wrn-next__avatar-group-member[data-color="success"] {
      --wrn-avatar-group-color: var(--wrn-color-success);
    }

    .wrn-next__avatar-group-member[data-color="info"] {
      --wrn-avatar-group-color: var(--wrn-color-info);
    }

    .wrn-next__avatar-group-member[data-color="warning"] {
      --wrn-avatar-group-color: var(--wrn-color-warning);
    }

    .wrn-next__avatar-group-member[data-color="danger"] {
      --wrn-avatar-group-color: var(--wrn-color-danger);
    }

    .wrn-next__avatar-group-member[data-shape="rounded"] {
      border-radius: calc(var(--wrn-radius-sm, 0.5rem) * 0.72);
    }

    .wrn-next__avatar-group-avatar,
    .wrn-next__avatar-group-overflow-button {
      display: grid;
      width: 100%;
      height: 100%;
      overflow: hidden;
      place-items: center;
      color: white;
      border: 2px solid var(--wrn-avatar-group-ring);
      border-radius: inherit;
      background: var(--wrn-avatar-group-color, var(--wrn-color-primary));
      box-shadow: 0 5px 14px rgb(0 0 0 / 0.16);
      font: inherit;
      font-size: calc(var(--wrn-avatar-group-size) * 0.3);
      font-weight: 800;
    }

    .wrn-next__avatar-group-avatar img,
    .wrn-next__avatar-group-menu-avatar img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .wrn-next__avatar-group-overflow-button {
      cursor: pointer;
      color: var(--wrn-color-text);
      background: var(--wrn-color-surface-2);
    }

    .wrn-next__avatar-group-member:hover,
    .wrn-next__avatar-group-member:focus-visible,
    .wrn-next__avatar-group-overflow:focus-within {
      z-index: 5;
      transform: translateY(-3px);
    }

    .wrn-next__avatar-group-member:focus-visible,
    .wrn-next__avatar-group-overflow-button:focus-visible {
      outline: 2px solid var(--wrn-color-primary);
      outline-offset: 3px;
    }

    .wrn-next__avatar-group-tooltip {
      position: absolute;
      left: 50%;
      bottom: calc(100% + 0.65rem);
      z-index: 20;
      width: max-content;
      max-width: 14rem;
      padding: 0.4rem 0.6rem;
      color: var(--wrn-color-bg);
      border-radius: 0.4rem;
      background: var(--wrn-color-text);
      box-shadow: 0 8px 22px rgb(0 0 0 / 0.22);
      font-size: 0.75rem;
      font-weight: 650;
      pointer-events: none;
      opacity: 0;
      transform: translate(-50%, 0.25rem);
      transition:
        opacity var(--wrn-motion-fast),
        transform var(--wrn-motion-fast);
    }

    .wrn-next__avatar-group-member:hover .wrn-next__avatar-group-tooltip,
    .wrn-next__avatar-group-member:focus-visible .wrn-next__avatar-group-tooltip {
      opacity: 1;
      transform: translate(-50%, 0);
    }

    .wrn-next__avatar-group-menu {
      position: absolute;
      top: calc(100% + 0.65rem);
      right: 0;
      z-index: 30;
      display: grid;
      width: max-content;
      min-width: 12rem;
      gap: 0.25rem;
      padding: 0.45rem;
      color: var(--wrn-color-text);
      border: 1px solid var(--wrn-color-border);
      border-radius: var(--wrn-radius-sm, 0.5rem);
      background: var(--wrn-color-surface);
      box-shadow: 0 16px 38px rgb(0 0 0 / 0.22);
    }

    .wrn-next__avatar-group-menu-item {
      display: flex;
      align-items: center;
      gap: 0.6rem;
      padding: 0.45rem 0.55rem;
      border-radius: 0.4rem;
      font-size: 0.82rem;
    }

    .wrn-next__avatar-group-menu-item:hover {
      background: var(--wrn-color-surface-2);
    }

    .wrn-next__avatar-group-menu-avatar {
      display: grid;
      width: 1.75rem;
      height: 1.75rem;
      overflow: hidden;
      flex: none;
      place-items: center;
      border-radius: 999px;
      background: var(--wrn-color-surface-2);
      font-size: 0.65rem;
      font-weight: 800;
    }

    /* Shared component foundation. */

        .wrn-component {
          --wrn-component-color: var(--wrn-color-primary);
          --wrn-component-scale: 1;
          margin: 0;
          color: var(--wrn-color-text);
          font-family: var(--wrn-font-sans, inherit);
        }

        .wrn-component--color-primary {
          --wrn-component-color: var(--wrn-color-primary);
        }

        .wrn-component--color-secondary {
          --wrn-component-color: var(--wrn-color-secondary);
        }

        .wrn-component--color-success {
          --wrn-component-color: var(--wrn-color-success);
        }

        .wrn-component--color-warning {
          --wrn-component-color: var(--wrn-color-warning);
        }

        .wrn-component--color-danger {
          --wrn-component-color: var(--wrn-color-danger);
        }

        .wrn-component--color-info {
          --wrn-component-color: var(--wrn-color-info);
        }

        .wrn-component--size-xs {
          --wrn-component-scale: 0.78;
        }

        .wrn-component--size-sm {
          --wrn-component-scale: 0.88;
        }

        .wrn-component--size-default,
        .wrn-component--size-md {
          --wrn-component-scale: 1;
        }

        .wrn-component--size-lg {
          --wrn-component-scale: 1.14;
        }

        .wrn-component--size-xl {
          --wrn-component-scale: 1.28;
        }

        .wrn-component:not(.wrn-btn) {
          font-size: calc(1em * var(--wrn-component-scale));
        }

        .wrn-component :is(a, button, input, select, textarea):focus-visible {
          outline-color: var(--wrn-component-color);
        }

        .wrn-component p {
          margin: 0;
          color: var(--wrn-color-muted);
          line-height: 1.6;
        }
  }
}