import { forwardRef } from '@wordpress/element';
import clsx from '../../../utils/clsx';

const MainLayout = ({ children, className, isBg = true, style }) => {
    return (
        <div
            style={style}
            className={clsx('rbfb', { 'rbfb-bg': isBg }, className)}
        >
            {children}
        </div>
    );
};

MainLayout.ContentWrapper = ({ style, children }) => {
    return (
        <div style={style} className="rbfb-content-wrapper">
            {children}
        </div>
    );
};

MainLayout.Content = forwardRef(({ children, className, style }, ref) => {
    const classNames = clsx('rbfb-content', className);

    return (
        <div style={style} className={classNames} ref={ref}>
            {children}
        </div>
    );
});

export default MainLayout;
