import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { forwardRef, useImperativeHandle, useRef, } from "react";
import UncontrolledTransition from "../UncontrolledTransition";
import Styles from "./MainGrid.module.scss";
function _MainGrid({ children, leftContent, rightContent, }, ref) {
    const refs = [
        useRef(null),
        useRef(null),
        useRef(null),
    ];
    useImperativeHandle(ref, () => ({
        setOrientation: (orientation) => {
            refs.forEach((r) => r.current?.setOrientation(orientation));
        },
    }), []);
    return (_jsx(_Fragment, { children: _jsxs("div", { className: Styles.container, children: [_jsx("div", { className: leftContent ? Styles.content : "", children: _jsx(UncontrolledTransition, { className: Styles.section, ref: refs[0], children: leftContent }) }), _jsx("div", { children: _jsx(UncontrolledTransition, { className: Styles.section, ref: refs[1], children: children }) }), _jsx("div", { className: rightContent ? Styles.content : "", children: _jsx(UncontrolledTransition, { className: Styles.section, ref: refs[2], children: rightContent }) })] }) }));
}
/**
 * This layout divides the screen in 3 fragments and provides a responsive adaptation when on mobile
 **/
/**
 * A layout component that arranges content in three sections (left, center, right)
 * and automatically adjusts for mobile devices
 */
const MainGrid = forwardRef(_MainGrid);
export default MainGrid;
//# sourceMappingURL=MainGrid.js.map