Avatar

export function AvatarBasic() {
  const renderSizes = (shape?: "circle" | "square", src = CIRCLE_URL) => (
    <div style={basicRow}>
      <div style={{ ...basicBlock, ...divider }}>
        <ElAvatar size={50} shape={shape} src={src} alt="avatar" />
      </div>
      <div style={{ ...basicBlock, ...divider }}>
        <ElAvatar size="small" shape={shape} src={src} alt="avatar" />
      </div>
      <div style={{ ...basicBlock, ...divider }}>
        <ElAvatar shape={shape} src={src} alt="avatar" />
      </div>
      <div style={basicBlock}>
        <ElAvatar size="large" shape={shape} src={src} alt="avatar" />
      </div>
    </div>
  );

  return (
    <ElRow style={basicRowStyle}>
      <ElCol lg={12} md={12} style={basicColDivider}>
        <div style={{ ...subTitle, textAlign: "center" }}>circle</div>
        {renderSizes("circle", CIRCLE_URL)}
      </ElCol>
      <ElCol lg={12} md={12} style={basicCol}>
        <div style={{ ...subTitle, textAlign: "center" }}>square</div>
        {renderSizes("square", SQUARE_URL)}
      </ElCol>
    </ElRow>
  );
}

export function AvatarTypes() {
  return (
    <div style={typesRow}>
      <div style={{ ...typeBlock, ...divider }}>
        <ElAvatar icon={<UserFilled />} />
      </div>
      <div style={{ ...typeBlock, ...divider }}>
        <ElAvatar src={TYPES_URL} alt="avatar" />
      </div>
      <div style={typeBlock}>
        <ElAvatar>user</ElAvatar>
      </div>
    </div>
  );
}

export function AvatarFallback() {
  return (
    <div>
      <ElAvatar
        size={60}
        src="https://empty"
        onError={() => true}
        alt="avatar"
      >
        <img src={FALLBACK_URL} alt="avatar" />
      </ElAvatar>
    </div>
  );
}

export function AvatarFit() {
  return (
    <div style={fitRow}>
      <div style={fitBlock}>
        <span style={subTitle}>fill</span>
        <ElAvatar
          shape="square"
          size={100}
          fit="fill"
          src={FIT_URL}
          alt="avatar"
        />
      </div>
      <div style={fitBlock}>
        <span style={subTitle}>contain</span>
        <ElAvatar
          shape="square"
          size={100}
          fit="contain"
          src={FIT_URL}
          alt="avatar"
        />
      </div>
      <div style={fitBlock}>
        <span style={subTitle}>cover</span>
        <ElAvatar
          shape="square"
          size={100}
          fit="cover"
          src={FIT_URL}
          alt="avatar"
        />
      </div>
      <div style={fitBlock}>
        <span style={subTitle}>none</span>
        <ElAvatar
          shape="square"
          size={100}
          fit="none"
          src={FIT_URL}
          alt="avatar"
        />
      </div>
      <div style={fitBlock}>
        <span style={subTitle}>scale-down</span>
        <ElAvatar
          shape="square"
          size={100}
          fit="scale-down"
          src={FIT_URL}
          alt="avatar"
        />
      </div>
    </div>
  );
}

export function AvatarGroupDemo() {
  const avatars = Array.from({ length: 5 }, (_, index) => (
    <ElAvatar key={index} src={CIRCLE_URL} alt="avatar" />
  ));

  return (
    <>
      <div style={groupBlock}>
        <p>default</p>
        <ElAvatarGroup>{avatars}</ElAvatarGroup>
      </div>
      <div style={groupBlock}>
        <p>use collapse-avatars</p>
        <ElAvatarGroup collapseAvatars>{avatars}</ElAvatarGroup>
      </div>
      <div style={groupBlock}>
        <p>use collapse-class and collapse-style</p>
        <ElAvatarGroup
          collapseAvatars
          collapseClass="my-collapse-avatar"
          collapseStyle={{
            backgroundColor: "#d9ecff",
            color: "var(--el-color-primary)",
          }}
        >
          {avatars}
        </ElAvatarGroup>
      </div>
      <div style={groupBlock}>
        <p>use max-collapse-avatars</p>
        <ElAvatarGroup collapseAvatars maxCollapseAvatars={3}>
          {avatars}
        </ElAvatarGroup>
      </div>
      <div style={groupBlock}>
        <p>use collapse-avatars-tooltip</p>
        <ElAvatarGroup
          collapseAvatars
          collapseAvatarsTooltip
          maxCollapseAvatars={3}
        >
          {avatars}
        </ElAvatarGroup>
      </div>
    </>
  );
}