import {
  MainContainer
} from "./chunk-VC46CKDX.mjs";
import {
  ProfileItemFragment
} from "./chunk-YTT7MYZX.mjs";

// tmp-babel/messages/web/GroupChatEdit/AddedMemberCard/index.js
import { AvatarWithPlaceholder } from "@baseapp-frontend/design-system/components/web/avatars";
import { IconButton } from "@baseapp-frontend/design-system/components/web/buttons";
import { FilledCloseIcon } from "@baseapp-frontend/design-system/components/web/icons";
import { Box, Typography } from "@mui/material";
import { useFragment } from "react-relay";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
var AddedMemberCard = function AddedMemberCard2(_ref) {
  var profile = _ref.profile, handleRemoveMember = _ref.handleRemoveMember;
  var _useFragment = useFragment(ProfileItemFragment, profile), id = _useFragment.id, image = _useFragment.image, name = _useFragment.name;
  return /* @__PURE__ */ _jsxs(MainContainer, {
    children: [/* @__PURE__ */ _jsxs(Box, {
      sx: {
        position: "relative"
      },
      children: [/* @__PURE__ */ _jsx(IconButton, {
        size: "small",
        sx: {
          position: "absolute",
          top: 0,
          right: 0,
          zIndex: 1
        },
        onClick: function onClick() {
          return handleRemoveMember(profile);
        },
        children: /* @__PURE__ */ _jsx(FilledCloseIcon, {})
      }), /* @__PURE__ */ _jsx(AvatarWithPlaceholder, {
        width: 64,
        height: 64,
        src: image === null || image === void 0 ? void 0 : image.url,
        sx: {
          alignSelf: "center",
          justifySelf: "center"
        }
      })]
    }), /* @__PURE__ */ _jsx(Typography, {
      variant: "subtitle2",
      noWrap: true,
      sx: {
        overflow: "hidden",
        textOverflow: "ellipsis",
        maxWidth: "64px"
      },
      children: name
    })]
  }, "chat-room-item-".concat(id));
};
var AddedMemberCard_default = AddedMemberCard;

export {
  AddedMemberCard_default
};
//# sourceMappingURL=chunk-J5RBSTY7.mjs.map