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";
export function DateAgentsGroup({ label, agents, isExpanded, onToggle, onAgentClick, onResumeAgent, onDeleteAgent, onRenameAgent, formatDateTime, selectedAgentId, }) {
    // Keep rows mounted through the collapse animation, then unmount them.
    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: "space-y-1.5", children: [_jsxs("button", { type: "button", onClick: onToggle, className: "group flex w-full items-center gap-1 py-1.5 text-left", children: [_jsx("span", { className: "text-neutral-grey-50 text-[12px] leading-5 font-medium", children: label }), _jsx(ChevronDown, { className: cn("text-neutral-grey-50 size-3.5 opacity-0 transition-all duration-150 group-hover:opacity-100", !isExpanded && "-rotate-90 opacity-100"), 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) && (_jsx("div", { className: "space-y-1", children: agents.map((agent) => (_jsx(AgentCard, { agent: agent, onClick: onAgentClick, onResume: onResumeAgent, onDelete: onDeleteAgent, onRename: onRenameAgent, formatDateTime: formatDateTime, selected: selectedAgentId === agent.id }, agent.id))) })) }) })] }));
}
//# sourceMappingURL=DateAgentsGroup.js.map