import { jsx as _jsx } from "react/jsx-runtime";
import * as React from 'react';
import useHeightCalculator from "../../gravity-blocks/hooks/useHeightCalculator.js";
import { block, getQaAttrubutes } from "../../utils/index.js";
import './Foldable.css';
const b = block('foldable-block');
const Foldable = ({ isOpened, children, className, qa }) => {
    const qaAttributes = getQaAttrubutes(qa);
    const blockRef = React.useRef(null);
    const contentRef = React.useRef(null);
    const contentHeight = useHeightCalculator(contentRef);
    React.useEffect(() => {
        if (blockRef && blockRef.current) {
            blockRef.current.style.height = isOpened && contentHeight ? `${contentHeight}px` : '0';
        }
    }, [isOpened, contentHeight]);
    return (_jsx("div", { ref: blockRef, className: b({ open: isOpened }, className), "data-qa": qaAttributes.default, children: _jsx("div", { ref: contentRef, className: b('content-container'), "data-qa": qaAttributes.container, children: children }) }));
};
export default Foldable;
//# sourceMappingURL=Foldable.js.map
