Avatar Placeholder

interface AvatarPlaceholderProps {
  name: string;
  size?: "sm" | "md" | "lg" | "xl";
}

const sizeClasses: Record<string, string> = {
  sm: "w-9 h-9 text-xs",
  md: "w-12 h-12 text-sm",
  lg: "w-16 h-16 text-lg",
  xl: "w-24 h-24 text-2xl",
};

const gradients = [
  "from-pink-500 to-rose-500",
  "from-purple-500 to-indigo-500",
  "from-sky-400 to-blue-500",
  "from-emerald-400 to-teal-500",
  "from-orange-400 to-red-500",
  "from-cyan-400 to-blue-600",
  "from-fuchsia-500 to-purple-600",
  "from-lime-400 to-green-500",
];

function getInitials(name: string): string {
  const parts = name.trim().split(/\s+/);
  if (parts.length >= 2) return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase();
  return parts[0]?.slice(0, 2).toUpperCase() || "?";
}

function hashToIndex(str: string, max: number): number {
  let hash = 0;
  for (let i = 0; i < str.length; i++) hash = str.charCodeAt(i) + ((hash << 5) - hash);
  return Math.abs(hash) % max;
}

export function AvatarPlaceholder({ name, size = "md" }: AvatarPlaceholderProps) {
  const gradient = gradients[hashToIndex(name, gradients.length)];
  const initials = getInitials(name);

  return (
    <div className={`${sizeClasses[size]} rounded-full bg-gradient-to-br ${gradient} flex items-center justify-center font-bold text-white ring-2 ring-white shadow-md shrink-0`} title={name}>
      {initials}
    </div>
  );
}