import { css, SerializedStyles } from '@emotion/core';

import { TextConentVerticalMobile, MapVerticalMobile } from './map-module.styles';

interface MapModuleConfig {
  [layoutOption: string]: {
    flexDirection: string[] | string;
    textContentStyles: SerializedStyles;
    mapStyles: SerializedStyles;
  };
}

export const mapModuleConfig: MapModuleConfig = {
  Left: {
    flexDirection: ['column', 'column', 'row-reverse'],
    textContentStyles: css`
      padding: 80px 0 80px 80px;
      text-align: left;
      flex: 0 0 50%;

      ${TextConentVerticalMobile}
    `,
    mapStyles: css`
      flex: 0 0 50%;

      ${MapVerticalMobile}
    `
  },
  Right: {
    flexDirection: ['column', 'column', 'row'],
    textContentStyles: css`
      padding: 80px 0 80px 0;
      text-align: left;
      flex: 0 0 50%;

      ${TextConentVerticalMobile}
    `,
    mapStyles: css`
      flex: 0 0 50%;

      ${MapVerticalMobile}
    `
  },
  Centred: {
    flexDirection: 'column',
    textContentStyles: css`
      padding: 60px 0 0 0;
      text-align: center;
    `,
    mapStyles: css`
      max-width: 800px;
      width: 100%;
      margin: 0 auto;
    `
  }
};