Avatar Group

export function AvatarGroup() {
  const users = [
    { name: "Alice", img: "https://i.pravatar.cc/150?img=32" },
    { name: "Bob", img: "https://i.pravatar.cc/150?img=11" },
    { name: "Charlie", img: "https://i.pravatar.cc/150?img=5" },
    { name: "Diana", img: "https://i.pravatar.cc/150?img=47" },
  ];

  return (
    <div className="flex items-center justify-center p-12 bg-white">
      <div className="flex items-center justify-center">
        <div className="flex -space-x-4 hover:space-x-1 transition-all duration-300">
          {users.map((user, i) => (
            <img
              key={i}
              className="w-12 h-12 rounded-full border-2 border-white object-cover shadow-sm hover:z-10 hover:scale-110 transition-transform cursor-pointer"
              src={user.img}
              alt={user.name}
              title={user.name}
            />
          ))}
          <a
            className="flex items-center justify-center w-12 h-12 rounded-full border-2 border-white bg-gray-100 text-sm font-medium text-gray-600 hover:bg-gray-200 shadow-sm z-0 hover:z-10 transition-colors"
            href="#"
          >
            +99
          </a>
        </div>
      </div>
    </div>
  );
}