---
// Avatar list container (.avatar-list); children are the avatars.
// For the people.json-fed demo variant see @shared/components/demo/PeopleAvatarList.astro.
import type { AvatarSize } from './Avatar.astro'

interface Props {
  stacked?: boolean | undefined
  /** avatar-list-{size} */
  size?: AvatarSize | undefined
  class?: string | undefined
  /** remaining attributes (id, data-*, aria-*, …) are forwarded to the root element */
  [key: string]: unknown
}

const { stacked, size, class: className, ...rest } = Astro.props
---

<div class:list={['avatar-list', stacked && 'avatar-list-stacked', size && `avatar-list-${size}`, className]} {...rest}>
  <slot />
</div>