import { ActorAvatar } from "./ActorAvatar.tsx";
import { Text } from "./Text.tsx";
import { cn } from "../../utils/cn.ts";
import type { NetworkSlicesWaitlistDefsRequestView } from "../../client.ts";

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

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

  return (
    <div className={cn("flex justify-center", className)}>
      {displayedRequests.map((request, index) => (
        <div
          key={index}
          className={cn(
            "relative transition-transform duration-200 hover:scale-110 hover:z-10",
            index > 0 && overlapClass
          )}
        >
          <ActorAvatar
            profile={request.profile || { handle: "user" }}
            size={size}
            className="border-2 border-white dark:border-zinc-800 hover:border-blue-500 dark:hover:border-blue-400 transition-colors duration-200"
          />
        </div>
      ))}
      {remainingCount > 0 && (
        <div
          className={cn(
            "bg-zinc-100 dark:bg-zinc-800 border-2 border-white dark:border-zinc-800 rounded-full flex items-center justify-center transition-transform duration-200 hover:scale-110 hover:z-10",
            size === 32 ? "w-8 h-8 -ml-2.5" : "w-6 h-6 -ml-2"
          )}
        >
          <Text size="xs" variant="muted">
            +{remainingCount}
          </Text>
        </div>
      )}
    </div>
  );
}