Avatar Square

interface AvatarSquareProps {
  src?: string;
  name: string;
  role?: string;
}

export function AvatarSquare({ src, name, role }: AvatarSquareProps) {
  const initials = name.split(" ").map(n => n[0]).join("").toUpperCase().slice(0, 2);

  return (
    <div className="flex flex-col items-center p-6 bg-white rounded-2xl border border-gray-100 shadow-sm hover:shadow-md transition-shadow">
      {src ? (
        <img src={src} alt={name} className="w-20 h-20 rounded-xl object-cover mb-3" />
      ) : (
        <div className="w-20 h-20 rounded-xl bg-gradient-to-br from-indigo-500 to-purple-600 flex items-center justify-center mb-3">
          <span className="text-xl font-bold text-white">{initials}</span>
        </div>
      )}
      <span className="font-semibold text-gray-900 text-sm">{name}</span>
      {role && <span className="text-xs text-gray-500 mt-0.5">{role}</span>}
    </div>
  );
}