import { Flex } from '@pega/cosmos-react-core';
import { StyledPlaceholder } from './ConfigurableLayout.styles';
export const Placeholder = ({ text }) => {
    const props = {
        verticalPadding: Math.floor(Math.random() * (4 - 1 + 1)) + 1
    };
    return (<Flex as={StyledPlaceholder} container={{ direction: 'column', justify: 'center' }} {...props}>
      <p>{text}</p>
    </Flex>);
};
export const regionAItems = [
    {
        id: 'a0',
        content: <Placeholder text='A0'/>,
        layoutConfig: {
            width: '1/4',
            minWidth: 150
        }
    },
    {
        id: 'a1',
        content: <Placeholder text='A1'/>,
        layoutConfig: {
            width: '1/4',
            minWidth: 150
        }
    },
    {
        id: 'a2',
        content: <Placeholder text='A2'/>,
        layoutConfig: {
            width: '1/4',
            minWidth: 150
        }
    },
    {
        id: 'a3',
        content: <Placeholder text='A3'/>,
        layoutConfig: {
            width: '1/4',
            minWidth: 150
        }
    },
    {
        id: 'a4',
        content: <Placeholder text='A4'/>,
        layoutConfig: {
            width: '3/4'
        }
    },
    {
        id: 'a5',
        content: <Placeholder text='A5'/>,
        layoutConfig: {
            width: '1/4',
            minWidth: 150
        }
    },
    {
        id: 'a6',
        content: <Placeholder text='A6'/>,
        layoutConfig: {
            width: '1/3'
        }
    },
    {
        id: 'a7',
        content: <Placeholder text='A7'/>,
        layoutConfig: {
            width: '2/3'
        }
    }
];
export const regionBItems = [
    {
        id: 'b0',
        content: <Placeholder text='B0'/>,
        layoutConfig: {
            width: '1/4',
            minWidth: 150
        }
    },
    {
        id: 'b1',
        content: <Placeholder text='B1'/>,
        layoutConfig: {
            width: '1/4',
            minWidth: 150
        }
    },
    {
        id: 'b2',
        content: <Placeholder text='B2'/>,
        layoutConfig: {
            width: '1/4',
            minWidth: 150
        }
    },
    {
        id: 'b3',
        content: <Placeholder text='B3'/>,
        layoutConfig: {
            width: '1/4',
            minWidth: 150
        }
    },
    {
        id: 'b4',
        content: <Placeholder text='B4'/>,
        layoutConfig: {
            width: '1/2'
        }
    },
    {
        id: 'b5',
        content: <Placeholder text='B5'/>,
        layoutConfig: {
            width: '1/2'
        }
    },
    {
        id: 'b6',
        content: <Placeholder text='B6'/>,
        layoutConfig: {
            width: 'full'
        }
    },
    {
        id: 'b7',
        content: <Placeholder text='B7'/>,
        layoutConfig: {
            width: '1/3'
        }
    },
    {
        id: 'b8',
        content: <Placeholder text='B8'/>,
        layoutConfig: {
            width: '2/3'
        }
    },
    {
        id: 'b9',
        content: <Placeholder text='B9'/>,
        layoutConfig: {
            width: '3/4'
        }
    },
    {
        id: 'b10',
        content: <Placeholder text='B10'/>,
        layoutConfig: {
            width: '1/4'
        }
    },
    {
        id: 'b11',
        content: <Placeholder text='B11'/>,
        layoutConfig: {
            width: '1/4',
            minWidth: 330,
            fillAvailable: false
        }
    }
];
//# sourceMappingURL=ConfigurableLayout.mocks.jsx.map