import { loadTrailActiveWalkers } from "../data/queries";
import { FloatingAvatar } from "./FloatingAvatar";

export async function TrailCardWalkers({ trailUri }: { trailUri: string }) {
  const walkers = await loadTrailActiveWalkers(trailUri);
  const displayWalkers = walkers.filter((w) => w.avatar).slice(0, 3);

  if (displayWalkers.length === 0) return null;

  return (
    <div className="TrailCard-walkers">
      {displayWalkers.map((walker, i) => {
        return (
          <FloatingAvatar
            key={i}
            src={walker.avatar}
            title={walker.handle}
            contained={true}
            opaque={true}
            handle={walker.handle}
            noLink
          />
        );
      })}
    </div>
  );
}
