import withStores from 'client/hocs/withStores';
import { Box } from 'client/UIKit/grid';
import mq from 'client/UIKit/mq';
import styled from 'styled-components';
import Info from './Components/Info';
import Results from './Components/Results';
import Sections from './Components/Sections';

const Grid = styled(Box)`
  grid-gap: 10px;
  ${mq.laptop`
    display:grid;    
    grid-template-columns: 3fr 2fr;
  `}
  ${mq.laptopHD`
    grid-template-columns: 3.6fr 2fr 2.5fr;
  `};
  ${mq.extra`
    grid-template-columns: 4fr 2.5fr 3fr;
  `}
`;

const Calculation = () => (
  <Grid>
    <Sections width={['100vw', '100vw', '100%']} />
    <Info width={['100vw', '100vw', '100%']} />
    <Results minHeight="500px" width={['100vw', '100vw', '100%']} />
  </Grid>
);

export default withStores(Calculation, ['userStore', 'calculationStore']);
