import styled, { StyledComponent } from '@emotion/styled';
import { css } from '@emotion/core';
import { Box } from '@rebass/emotion';

import theme, { breakpoints } from 'utils/theme';

export const ModuleWrapper: StyledComponent<any, any, any> = styled(Box)`

  @media (min-width: ${breakpoints.medium}) {
    display: flex;
    position: relative;
    flex-direction: ${(props: any): string => props.textPosition === 'Left' ? 'row-reverse' : 'row'};
  }

  @media (min-width: ${breakpoints.large}) {
    align-items: center;
  }
`;

export const Image = css`
  flex: 0 0 50%;
`;

export const Text: StyledComponent<any, any, any> = styled(Box)`
  position: relative;
  flex: 0 0 50%;
  padding: ${theme.space[1]}px;
  background: ${(props: any): string => props.bgColour};

  @media (min-width: ${breakpoints.large}) {
    position: absolute;
    width: 50%;
    padding: ${theme.space[3]}px;
  }
`;