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 border-l-2 bg-gradient-to-b px-3 py-2 text-left text-xs font-medium tracking-wide uppercase transition-colors duration-200 ease-in-out", "focus-visible:ring-highlight-100 focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:outline-none", open
                    ? "border-neutral-grey-50 from-neutral-grey-5 to-white text-neutral-grey-100"
                    : "border-neutral-grey-10 from-transparent to-transparent text-neutral-grey-50 hover:border-neutral-grey-50 hover:from-neutral-grey-5 hover:to-white hover:text-neutral-grey-100"), onClick: () => toggleSection(title), "aria-expanded": open, "data-testid": "collapsible-section-button", children: [_jsx("span", { children: title }), _jsx(ChevronDown, { className: cn("size-4 transition-transform duration-200 ease-in-out", open
                            ? "text-neutral-grey-50 rotate-180"
                            : "text-neutral-grey-10 group-hover:text-neutral-grey-50") })] }), _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