import RemoteImage from "./RemoteImage";

// Avatar image with a graceful fallback: a neutral disc (optionally the name's initial) while there is
// no picture. The loading itself — no Referer for Google's avatar CDNs, the retry past the browser's
// negative cache, the failure remembered by URL so a recycled feed slot never paints one channel's
// initial over the next one's picture — is ui/RemoteImage's.
export default function Avatar({
  src,
  alt = "",
  fallback,
  className = "",
}: {
  src?: string | null;
  alt?: string;
  fallback?: string; // a name/title; its first letter is shown when there's no image
  className?: string;
}) {
  const initial = fallback?.trim()?.[0]?.toUpperCase() ?? "";
  return (
    <RemoteImage
      src={src}
      alt={alt}
      loading="lazy"
      className={className}
      fallback={
        <div
          className={`bg-card grid place-items-center font-semibold text-muted select-none ${className}`}
          aria-hidden
        >
          {initial}
        </div>
      }
    />
  );
}