import React from 'react';
import { css } from '@emotion/core';
import { Box } from '@rebass/emotion';

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

import { BlankSpaceModuleProps } from './blank-space-module.types';

const BlankSpaceModule = ({ data }: BlankSpaceModuleProps): JSX.Element => {
  const sizeMobile: any = {
    Small: theme.space[0],
    Medium: theme.space[4],
    Large: theme.space[5]
  };

  const sizeDesktop: any = {
    Small: theme.space[0],
    Medium: theme.space[5],
    Large: theme.space[6]
  };

  return (
    <Box
      css={css`
        height: ${sizeMobile[data.spaceSize]}px;

        @media (min-width: ${breakpoints.large}) {
          height: ${sizeDesktop[data.spaceSize]}px;
        }
      `}
    />
  );
};

export default BlankSpaceModule;