import Avatar from './Avatar';
import { getTeamMemberByName } from '../teamMembers';

/**
 * AvatarGroup — B端头像组组件（Tailwind 内联）
 *
 * 对齐 Figma AvatarGroup 组件集，展示 4 个头像按固定 10px 重叠的多人场景。
 * 头像单项直接复用 Avatar 组件，仅通过宿主处理重叠层级和图片微调覆盖。
 *
 * **何时用**：强调「多人参与、协作氛围」的装饰性缩略（人数与顺序不可配）。
 * **不用**：要展示真实成员列表、可点姓名、或人数 ≠5 → 用 `Avatar` 列表/表格列，勿强行用本组件。
 *
 * @prop {'s'|'default'|'m'} [size='s'] — 头像组尺寸，对应单项 32 / 40 / 48px
 * @prop {string} [className=''] — 自定义类名
 * @prop {React.CSSProperties|undefined} [style=undefined] — 自定义内联样式
 */

/* ── 容器 → 头像组排列 ── */
const GROUP = 'relative flex isolate items-start pr-avatar-group-overlap';

/* ── 单项 → 复用 Avatar 并关闭默认人像缩放 ── */
const ITEM_CLASS = [
  '-mr-avatar-group-overlap',
  'after:pointer-events-none',
  'after:absolute',
  'after:inset-0',
  'after:rounded-full',
  "after:content-['']",
  'after:shadow-[inset_0_0_0_1px_var(--color-fill)]',
  '[&_img]:scale-100',
  '[&_img]:translate-y-0',
].join(' ');

/* ── 尺寸 → 单项边长 ── */
const SIZE_CLASS = {
  s: 'size-8',
  default: 'size-10',
  m: 'size-12',
};

/* ── 头像组资源 ── */
const GROUP_IMAGES = [
  getTeamMemberByName('李思儒')?.avatarSrc,
  getTeamMemberByName('程程murphy')?.avatarSrc,
  getTeamMemberByName('刘德琳')?.avatarSrc,
  getTeamMemberByName('段然')?.avatarSrc,
];

export default function AvatarGroup({
  size = 's',
  className = '',
  style,
  ...rest
}) {
  const resolvedSize = SIZE_CLASS[size] ? size : 's';

  return (
    <div
      className={[`tfds-avatar-group`, [GROUP, className].filter(Boolean).join(' ')].filter(Boolean).join(' ')}
      style={style}
      {...rest}
     data-tfds-component="AvatarGroup">
      {GROUP_IMAGES.filter(Boolean).map((src, index) => (
        <Avatar
          key={src}
          size={resolvedSize}
          type="image"
          src={src}
          alt=""
          aria-hidden="true"
          className={ITEM_CLASS}
          style={{
            zIndex: GROUP_IMAGES.length - index,
          }}
        />
      ))}
    </div>
  );
}
