import React from "react";
import { ChatBubble } from "./ChatBubble";
import { useAgents } from "@/lib/state";

// Approximate height of a collapsed bubble + gap for cascading
const BUBBLE_CASCADE_OFFSET = 70; // e.g., 50px height + 10px padding + 10px gap
const INITIAL_BOTTOM_OFFSET = 20;
const INITIAL_RIGHT_OFFSET = 20;

export function ChatManager(): React.ReactNode {
	// TODO(gio): reconsider
	return null;
	const agents = useAgents();
	if (agents.length === 0) {
		return null;
	}
	return (
		<>
			{agents.map((agent, index) => {
				const initialPosition = {
					bottom: INITIAL_BOTTOM_OFFSET + index * BUBBLE_CASCADE_OFFSET,
					right: INITIAL_RIGHT_OFFSET,
					top: undefined, // Ensure top/left are not set if bottom/right are
					left: undefined,
				};
				return (
					<ChatBubble
						key={agent.name}
						agentName={agent.agentName}
						agentUrl={agent.address}
						initialPosition={initialPosition}
					/>
				);
			})}
		</>
	);
}