export function formatAvatarUrl(src?: string): string | undefined {
  if (!src || src.startsWith("data:")) return src;
  try {
    const url = new URL(src);
    const isTangledAvatar =
      url.hostname === "avatar.tangled.sh" ||
      url.hostname === "avatar-dev.tangled.org" ||
      ((url.hostname.endsWith(".tangled.org") ||
        url.hostname.endsWith(".tangled.sh") ||
        url.hostname === "localhost" ||
        url.hostname === "127.0.0.1") &&
        url.pathname.startsWith("/avatar/"));

    if (isTangledAvatar || url.searchParams.get("format") === "webp") {
      url.searchParams.set("format", "jpeg");
      return url.toString();
    }
  } catch {}
  return src;
}

interface AvatarProps {
  src?: string;
  size?: number;
}

export function Avatar({ src, size = 64 }: AvatarProps) {
  const avatarSrc = formatAvatarUrl(src);

  return (
    <div
      style={{
        width: size,
        height: size,
        borderRadius: size / 2,
        overflow: "hidden",
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        backgroundColor: "#e5e7eb",
      }}>
      {avatarSrc ? (
        <img
          src={avatarSrc}
          width={size}
          height={size}
          style={{ objectFit: "cover" }}
        />
      ) : null}
    </div>
  );
}