import AvatarItem from "@/site/AvatarItem";
import { OnAvatarInput } from "@/site/Site";

import { useSiteStore } from "@/Stores";
import { observer } from "mobx-react-lite";

export default observer(
  ({ onAvatarInput }: { onAvatarInput: OnAvatarInput }) => {
    const { avatars } = useSiteStore();

    return (
      <>
        {avatars.map(
          ({
            avatarID,
            avatarName,
            avatarConfigure,
            isSiteHand,
            isMe,
            isValve,
            isAudioInput,
          }) => (
            <AvatarItem
              key={avatarID}
              avatarID={avatarID}
              avatarName={avatarName}
              avatarConfigure={avatarConfigure}
              isSiteHand={isSiteHand}
              isMe={isMe}
              isValve={isValve}
              isAudioInput={isAudioInput}
              onAvatarInput={onAvatarInput}
            />
          ),
        )}
      </>
    );
  },
);