import { FriendUserItem } from "@openim/wasm-client-sdk/lib/types/entity";

import OIMAvatar from "@/components/OIMAvatar";

const FriendListItem = ({
  friend,
  showUserCard,
  title,
}: {
  friend: FriendUserItem;
  showUserCard: (userID: string) => void;
  title?: string;
}) => {
  const job =
    title ||
    (() => {
      try {
        const extra = friend.ex ? JSON.parse(friend.ex) : {};
        return extra.title || extra.jobTitle || "";
      } catch {
        return "";
      }
    })();

  return (
    <div
      className="flex h-14 cursor-pointer items-center rounded-lg px-3.5 transition-colors duration-100 hover:bg-[var(--chat-bg)]"
      onClick={() => showUserCard(friend.userID)}
    >
      <OIMAvatar size={40} src={friend.faceURL} text={friend.remark || friend.nickname} />
      <div className="ml-3 min-w-0 flex-1">
        <div className="truncate text-base font-medium text-[var(--base-black)]">
          {friend.remark || friend.nickname}
        </div>
        {job ? (
          <div className="truncate text-sm text-[var(--sub-text)]">{job}</div>
        ) : null}
      </div>
    </div>
  );
};

export default FriendListItem;
