import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import styled from 'styled-components';
import { AppContainer } from './AppContainer';
const ThirtySeventy = {
    left: 0.3,
    right: 0.7,
};
const SixtyFiveThirtyFive = {
    left: 0.65,
    right: 0.35,
};
// const SeventyThirty: Ratio = {
//   left: 0.7,
//   right: 0.3,
// };
const FiftyFifty = {
    left: 0.5,
    right: 0.5,
};
const PanelsContainer = styled.div `
  display: flex;
  flex: 1;
  gap: ${({ noGap }) => (noGap ? 0 : AppContainer.sectionDistance)};
`;
const LeftPanel = styled.div `
  flex: ${(props) => props.flex || '0 auto'};
  background: ${(props) => props.theme[props.background || 'backgroundLevel3']};
  display: flex;
  min-width: 0;
`;
const RightPanel = styled.div `
  flex: ${(props) => props.flex || '0 auto'};
  background: ${(props) => props.theme[props.background || 'backgroundLevel4']};
  display: flex;
  min-width: 0;
`;
function getPanelsObjectRation(ratio) {
    if (ratio === '50-50') {
        return FiftyFifty;
    }
    if (ratio === '65-35') {
        return SixtyFiveThirtyFive;
    }
    if (ratio === '30-70') {
        return ThirtySeventy;
    }
    throw new Error('Unsupported ratio');
}
export const TwoPanelLayout = ({ panelsRatio, leftPanel, rightPanel, noGap, ...rest }) => {
    const panelsObjectRatio = getPanelsObjectRation(panelsRatio);
    return (_jsxs(PanelsContainer, { noGap: noGap, ...rest, children: [_jsx(LeftPanel, { flex: panelsObjectRatio.left, background: leftPanel.background, children: leftPanel.children }), _jsx(RightPanel, { flex: panelsObjectRatio.right, background: rightPanel.background, children: rightPanel.children })] }));
};
