import type { LinkAccountIdentity } from "@/types/profile";

/**
 * Photo-or-initial circle for another account (Linked Accounts, pending
 * requests, blocked requests). Same look as the signed-in user's avatar in
 * the side nav so the two read as the same kind of thing.
 */
export function AccountAvatar({
  account,
  sizeClass,
}: {
  account: LinkAccountIdentity;
  sizeClass: string;
}) {
  if (account.avatar) {
    return (
      // eslint-disable-next-line @next/next/no-img-element -- data-URL avatars, no image-optimization pipeline in this self-hosted app
      <img
        src={account.avatar}
        alt={account.name ?? account.email}
        className={`${sizeClass} shrink-0 rounded-full object-cover`}
      />
    );
  }
  const letter = (account.name?.trim()[0] ?? account.email[0] ?? "?").toUpperCase();
  return (
    <span
      className={`${sizeClass} flex shrink-0 items-center justify-center rounded-full bg-primary/10 text-xs font-bold text-primary uppercase`}
    >
      {letter}
    </span>
  );
}