const gradients = [
  "from-blue-500 to-indigo-600",
  "from-violet-500 to-purple-600",
  "from-pink-500 to-rose-600",
  "from-emerald-500 to-teal-600",
  "from-amber-500 to-orange-600",
  "from-sky-500 to-cyan-600",
];

export default function ToolIcon({
  name,
  iconUrl,
  size = "md",
}: {
  name: string;
  iconUrl?: string | null;
  size?: "sm" | "md" | "lg";
}) {
  const sizeClass =
    size === "lg" ? "h-20 w-20 text-3xl" : size === "sm" ? "h-10 w-10 text-base" : "h-14 w-14 text-xl";

  if (iconUrl) {
    return (
      // eslint-disable-next-line @next/next/no-img-element
      <img
        src={iconUrl}
        alt={name}
        className={`${sizeClass} rounded-2xl object-contain`}
        loading="lazy"
      />
    );
  }

  const gradient =
    gradients[
      Math.abs([...name].reduce((acc, ch) => acc + ch.charCodeAt(0), 0)) % gradients.length
    ];

  return (
    <div
      className={`${sizeClass} flex items-center justify-center rounded-2xl bg-gradient-to-br ${gradient} font-bold text-white`}
      aria-hidden
    >
      {name.replace(/[^a-zA-Z0-9]/g, "").charAt(0).toUpperCase() || "?"}
    </div>
  );
}