import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { ChevronDown } from "lucide-react";
import { AgentCard } from "./AgentCard";
import { SecretAgentIcon } from "../editor/ui/Icons";
import { sanitizeSvg } from "../lib/sanitize";
import { cn } from "../lib/utils";
export function ProfileAgentsGroup({ profileGroup, isExpanded, isLoadingMore, hasMore, onToggle, onLoadMore, onAgentClick, onResumeAgent, onCloseAgent, onDeleteAgent, formatDateTime, selectedAgentId, }) {
    const count = profileGroup.totalClosedCount;
    return (_jsxs("div", { className: "bg-white", children: [_jsxs("button", { onClick: onToggle, className: cn("group flex w-full items-center gap-3 px-3 py-2.5 text-left transition-colors", isExpanded ? "bg-neutral-grey-5/60" : "hover:bg-neutral-grey-5/80"), children: [_jsx("div", { className: "text-neutral-grey-50 flex h-7 w-7 shrink-0 items-center justify-center", children: profileGroup.profileSvgIcon ? (_jsx("div", { className: "text-neutral-grey-50 flex h-7 w-7 items-center justify-center [&>svg]:h-full [&>svg]:w-full", dangerouslySetInnerHTML: {
                                __html: sanitizeSvg(profileGroup.profileSvgIcon),
                            } })) : (_jsx(SecretAgentIcon, { size: 24, strokeWidth: 1.5, className: "text-neutral-grey-50" })) }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("h3", { className: "text-neutral-grey-100 truncate text-[13px] font-semibold tracking-tight", children: profileGroup.profileName }), _jsxs("p", { className: "text-neutral-grey-50 text-[11px]", children: [count, " closed agent", count !== 1 ? "s" : ""] })] }), _jsx("span", { className: cn("rounded-badge badge-pad-sm text-2xs shrink-0 font-semibold tabular-nums transition-colors", isExpanded
                            ? "bg-neutral-grey-10/70 text-neutral-grey-100"
                            : "bg-neutral-grey-5 text-neutral-grey-50 group-hover:bg-neutral-grey-10/70 group-hover:text-neutral-grey-100"), 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: 2 })] }), isExpanded && (_jsxs("div", { className: "border-border-default bg-neutral-grey-5/40 relative border-t pl-5", children: [_jsx("div", { className: "bg-border-default/70 absolute top-0 bottom-0 left-[19px] w-px" }), _jsx("div", { className: "divide-border-default border-border-default divide-y border-l bg-white", children: profileGroup.agents.map((agent) => (_jsx(AgentCard, { agent: agent, onClick: onAgentClick, onResume: onResumeAgent, onClose: onCloseAgent, onDelete: onDeleteAgent, formatDateTime: formatDateTime, selected: selectedAgentId === agent.id }, agent.id))) }), hasMore && (_jsx("div", { className: "border-border-default flex justify-center border-l bg-white py-3", 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-full border bg-white px-6 py-1.5 text-[12px] font-medium transition-all hover:shadow-sm disabled:opacity-50", children: isLoadingMore ? "Loading..." : "Load More" }) }))] }))] }));
}
//# sourceMappingURL=ProfileAgentsGroup.js.map