import React, { ReactElement } from "react";

type UserAvatarGroupTooltipTitleProps = {
  tooltipBody: ReactElement[];
  tooltipTitle: string;
};

export const UserAvatarGroupTooltipTitle = ({
  tooltipBody,
  tooltipTitle,
}: UserAvatarGroupTooltipTitleProps) => {
  return (
    <div className="p-8 pt-6">
      <div className="text-style-M50 uppercase text-N70">{tooltipTitle}</div>
      {tooltipBody.length &&
        tooltipBody.map((element: ReactElement, id: number) => {
          const userAvatar = React.cloneElement(element, {
            opacity: 1,
            avatarBorder: true,
            size: 20,
            tooltip: undefined,
            presentation: true,
          });

          return (
            <div className="mt-4 flex items-center" key={id}>
              {userAvatar}
              <div className="text-style-M100 overflow-hidden pl-4 text-N0">
                {element.props.tooltip}
              </div>
              <div className="text-style-M100 ml-auto overflow-hidden pl-12 text-right text-N70">
                {element.props.tertiaryTooltip}
              </div>
            </div>
          );
        })}
    </div>
  );
};
