import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useEffect, useState } from "react";
import { ChevronDown } from "lucide-react";
import { AgentCard } from "./AgentCard";
import { cn } from "../lib/utils";
import { AgentProfileIcon } from "./AgentProfileIcon";
import { CountBadge } from "../components/ui/badge";
export function ProfileAgentsGroup({ profileGroup, isExpanded, isLoadingMore, hasMore, onToggle, onLoadMore, onAgentClick, onResumeAgent, onDeleteAgent, onRenameAgent, formatDateTime, selectedAgentId, density = "default", showProfileIcons = true, }) {
    const count = profileGroup.totalClosedCount;
    const isCompact = density === "compact";
    // Keep the children mounted through the collapse animation, then unmount so
    // we don't hold (or focus-trap) hidden agent rows while the group is closed.
    const [renderChildren, setRenderChildren] = useState(isExpanded);
    useEffect(() => {
        if (isExpanded) {
            setRenderChildren(true);
            return;
        }
        const timeout = setTimeout(() => setRenderChildren(false), 220);
        return () => clearTimeout(timeout);
    }, [isExpanded]);
    return (_jsxs("div", { className: cn("bg-white", isCompact ? "space-y-0.5" : "space-y-1"), children: [_jsxs("button", { onClick: onToggle, className: cn("group flex w-full items-center text-left transition-colors", isCompact
                    ? "gap-2 rounded border border-transparent px-2 py-2"
                    : "gap-3 rounded-md px-2.5 py-2", isExpanded
                    ? isCompact
                        ? "border-border-default bg-neutral-grey-10"
                        : "bg-neutral-grey-5"
                    : isCompact
                        ? "hover:border-border-default hover:bg-neutral-grey-5"
                        : "hover:bg-neutral-grey-5/70"), children: [showProfileIcons && (_jsx(AgentProfileIcon, { svgIcon: profileGroup.profileSvgIcon, size: "list" })), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("h3", { className: "text-neutral-grey-100 truncate text-[12px] leading-5 font-normal", children: profileGroup.profileName }), _jsxs("p", { className: "text-neutral-grey-50 text-[12px] leading-4", children: [count, " closed agent", count !== 1 ? "s" : ""] })] }), _jsx(CountBadge, { children: count }), _jsx(ChevronDown, { className: cn("text-neutral-grey-50 size-4 shrink-0 transition-transform duration-200", isExpanded && "text-neutral-grey-50 rotate-180"), strokeWidth: 1 })] }), _jsx("div", { className: cn("grid transition-[grid-template-rows] duration-200 ease-out motion-reduce:transition-none", isExpanded ? "grid-rows-[1fr]" : "grid-rows-[0fr]"), children: _jsx("div", { className: cn("overflow-hidden transition-opacity duration-200 ease-out motion-reduce:transition-none", isExpanded ? "opacity-100" : "opacity-0"), children: (isExpanded || renderChildren) && (_jsxs("div", { className: cn(isCompact ? "space-y-0.5 pl-0" : "space-y-1 pl-4"), children: [_jsx("div", { className: cn(isCompact ? "space-y-0.5" : "space-y-1"), children: profileGroup.agents.map((agent) => (_jsx(AgentCard, { agent: agent, onClick: onAgentClick, onResume: onResumeAgent, onDelete: onDeleteAgent, onRename: onRenameAgent, formatDateTime: formatDateTime, selected: selectedAgentId === agent.id, density: density, showProfileIcon: showProfileIcons }, agent.id))) }), hasMore && (_jsx("div", { className: "flex justify-center bg-white py-2", children: _jsx("button", { onClick: (e) => {
                                        e.stopPropagation();
                                        onLoadMore();
                                    }, disabled: isLoadingMore, className: "border-border-default text-neutral-grey-50 hover:bg-neutral-grey-5 hover:text-neutral-grey-100 rounded border bg-white px-4 py-1.5 text-[12px] font-medium transition-all hover:shadow-sm disabled:opacity-50", children: isLoadingMore ? "Loading..." : "Load More" }) }))] })) }) })] }));
}
//# sourceMappingURL=ProfileAgentsGroup.js.map