// src/relay/pure-relay/SuggestedFriends/SuggestedFriends.tsx
import * as React from "react";
import { graphql, useFragment } from "react-relay";
var SuggestedFriends_suggestedFriendsFragment = graphql`
  fragment SuggestedFriends_suggestedFriendsFragment on Viewer {
    suggestedFriends {
      id
      name {
        firstName
        lastName
      }
    }
  }
`;
var SuggestedFriendsComponent = (props) => {
  const { suggestedFriends } = useFragment(
    SuggestedFriends_suggestedFriendsFragment,
    props.viewer
  );
  if (!suggestedFriends || suggestedFriends.length === 0) {
    return /* @__PURE__ */ React.createElement("div", null, "No suggested friends available.");
  }
  return /* @__PURE__ */ React.createElement("div", { style: { padding: 16 } }, /* @__PURE__ */ React.createElement("h2", null, "Suggested Friends"), suggestedFriends.length === 0 ? /* @__PURE__ */ React.createElement("p", null, "No suggested friends at the moment.") : /* @__PURE__ */ React.createElement("ul", { style: { listStyle: "none", padding: 0 } }, suggestedFriends.map((friend) => {
    var _a, _b;
    return /* @__PURE__ */ React.createElement(
      "li",
      {
        key: friend.id,
        style: {
          padding: 8,
          margin: "8px 0",
          border: "1px solid #ddd",
          borderRadius: 4,
          backgroundColor: "#f9f9f9"
        }
      },
      /* @__PURE__ */ React.createElement("strong", null, (_a = friend.name) == null ? void 0 : _a.firstName, " ", (_b = friend.name) == null ? void 0 : _b.lastName)
    );
  })));
};
export {
  SuggestedFriendsComponent,
  SuggestedFriends_suggestedFriendsFragment
};
