import { resolveHandleToDid, tryFetchBskyAvatar } from "@/data/queries";

export async function ProfileAvatar({ handle }: { handle: string }) {
  const did = await resolveHandleToDid(handle);
  const avatar = await tryFetchBskyAvatar(did);

  if (!avatar) {
    return <div className="ProfileShell-avatar ProfileShell-avatarPlaceholder" />;
  }

  return <img src={avatar} alt={handle} className="ProfileShell-avatar" />;
}

export function ProfileAvatarShimmer() {
  return <div className="ProfileShell-avatar skeleton" />;
}
