import { h } from '@ui-arch/frame';
import { avatar } from './avatar.js';
import type { AvatarGroupProps } from './types.js';

/*** 头像组：横向叠放（负边距 + 底色描边切口），超出 max 折叠成 +N，整组 title 列出全部姓名 ***/
export function avatarGroup(props: AvatarGroupProps): HTMLElement {
  const size = props.size ?? 32;             // 直径与单个 avatar 一致
  const max = Math.max(props.max ?? 4, 1);   // 至少留一个位置，避免传 0 后只剩 +N
  const shown = props.items.slice(0, max);   // 展示前 max 个
  const rest = props.items.length - shown.length;
  const group = h('div', {
    class: 'ua-avatar-group',
    title: props.items.map((item) => item.name).join('、'), // 折叠后仍能看到全部成员
  }, ...shown.map((item) => avatar({ name: item.name, src: item.src, variant: item.variant, size })));
  if (rest <= 0) return group; // 卫语句：没超上限就不渲染 +N
  group.append(h('span', {
    class: 'ua-avatar ua-avatar-more',
    style: `width:${size}px;height:${size}px;font-size:${Math.round(size * 0.38)}px`,
    'aria-label': `还有 ${rest} 人`, // 纯文本 +N 读屏会念成「加 3」，补可访问名
  }, `+${rest}`));
  return group;
}