import { useEffect, useState } from "react";

// Avatar image with a graceful fallback.
//
// Uses referrerPolicy="no-referrer" because Google's avatar CDNs
// (yt3.ggpht.com / lh3.googleusercontent.com) rate-limit bursts of
// referrer-bearing requests — when a feed page fires dozens of avatar loads at
// once, a random subset gets throttled (HTTP 429) and the browser shows its
// broken-image icon. Dropping the referrer makes those CDNs serve the images.
// If a load still fails we render a neutral placeholder (optionally an initial)
// instead of the broken-image icon.
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 [failed, setFailed] = useState(false);
  useEffect(() => setFailed(false), [src]);

  if (src && !failed) {
    return (
      <img
        src={src}
        alt={alt}
        loading="lazy"
        referrerPolicy="no-referrer"
        onError={() => setFailed(true)}
        className={className}
      />
    );
  }

  const initial = fallback?.trim()?.[0]?.toUpperCase() ?? "";
  return (
    <div
      className={`bg-card grid place-items-center font-semibold text-muted select-none ${className}`}
      aria-hidden
    >
      {initial}
    </div>
  );
}