import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useMemo } from "react";
import { CollapsibleContent, Collapsible, CollapsibleTrigger } from "../collapsible";
import { useCollapseContext } from "./collapseContext";
import { cn } from "../../utils/css";
import { ChevronDown } from "lucide-react";
export const Panel = (props)=>{
    const { activeKey, setActiveKey } = useCollapseContext();
    const header = useMemo(()=>{
        if (typeof props.header === "string") {
            return /*#__PURE__*/ _jsxs("div", {
                className: cn("orderly-py-2 orderly-border-b orderly-border-divider flex items-center orderly-group orderly-cursor-pointer", props.headerClassName),
                children: [
                    /*#__PURE__*/ _jsx("div", {
                        className: "orderly-flex-1 group-data-[state=open]:orderly-font-semibold",
                        children: props.header
                    }),
                    /*#__PURE__*/ _jsx(ChevronDown, {
                        size: 16,
                        className: "group-data-[state=open]:orderly-rotate-180 orderly-transition-transform"
                    })
                ]
            });
        }
        return props.header;
    }, [
        props.header,
        props.headerClassName
    ]);
    return /*#__PURE__*/ _jsxs(Collapsible, {
        disabled: props.disabled,
        open: props.itemKey === activeKey,
        onOpenChange: (open)=>{
            if (open) {
                setActiveKey(props.itemKey);
            } else {
                setActiveKey("");
            }
        },
        children: [
            /*#__PURE__*/ _jsx(CollapsibleTrigger, {
                asChild: true,
                children: header
            }),
            /*#__PURE__*/ _jsx(CollapsibleContent, {
                className: "orderly-py-3",
                children: props.children
            })
        ]
    });
};

//# sourceMappingURL=panel.js.map