import { Avatar } from "./Avatar.tsx";
import { cn } from "../utils/cn.ts";

interface WaitlistRequest {
  profile?: {
    handle?: string;
    avatar?: {
      url?: string;
    } | null;
  } | null;
}

interface AvatarStackProps {
  requests: WaitlistRequest[];
  maxDisplay?: number;
  size?: number;
  className?: string;
}

export function AvatarStack({
  requests,
  maxDisplay = 20,
  size = 24,
  className,
}: AvatarStackProps) {
  const displayedRequests = requests.slice(0, maxDisplay);
  const overlapClass = size === 32 ? "-ml-2.5" : "-ml-2";

  return (
    <div className={cn("flex justify-center", className)}>
      {displayedRequests.map((request, index) => {
        const avatarSrc = request.profile?.avatar?.url;
        const handle = request.profile?.handle || "user";

        return (
          <div
            key={index}
            className={cn(
              "relative transition-transform duration-200 hover:scale-110 hover:z-10",
              index > 0 && overlapClass
            )}
          >
            <div className="border-2 border-zinc-900 hover:border-blue-500 transition-colors duration-200 rounded-full">
              <Avatar
                src={avatarSrc}
                alt={handle}
                size="sm"
              />
            </div>
          </div>
        );
      })}
    </div>
  );
}