import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { cn } from "../../lib/utils";
import { useCollapsedSections } from "../utils";
import { ChevronDown } from "lucide-react";
export function Section({ title, children, }) {
    const { isSectionCollapsed, toggleSection } = useCollapsedSections();
    const open = !isSectionCollapsed(title);
    return (_jsxs("div", { className: "mb-1", children: [_jsxs("button", { type: "button", className: cn("group flex w-full cursor-pointer items-center justify-between px-3 py-2.5 text-left text-xs font-medium tracking-wide transition-all duration-200 ease-in-out", "focus-visible:ring-theme-secondary focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:outline-none", open
                    ? "bg-gradient-to-r from-gray-700 to-gray-600 text-white shadow-sm"
                    : "bg-gray-100 text-gray-600 hover:bg-gray-200 hover:text-gray-800"), onClick: () => toggleSection(title), "aria-expanded": open, "data-testid": "collapsible-section-button", children: [_jsxs("span", { className: "flex items-center gap-2", children: [_jsx("span", { className: cn("h-1.5 w-1.5 rounded-full transition-colors", open
                                    ? "bg-theme-secondary"
                                    : "bg-gray-400 group-hover:bg-gray-500") }), title] }), _jsx(ChevronDown, { className: cn("size-4 transition-transform duration-200 ease-in-out", open ? "rotate-180" : "text-gray-400 group-hover:text-gray-600") })] }), _jsx("div", { className: cn("grid overflow-hidden transition-[grid-template-rows] duration-300 ease-out", open ? "grid-rows-[1fr]" : "grid-rows-[0fr]"), children: _jsx("div", { className: "min-h-0 overflow-hidden", children: _jsx("div", { className: "px-2 py-4", children: children }) }) })] }));
}
//# sourceMappingURL=Section.js.map