import PropTypes from 'prop-types';
import styled from 'styled-components';

const Spacer = styled.div`
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 20px;

  ${props =>
    props.small &&
    `
    margin-bottom: 10px;
  `};

  ${props =>
    props.medium &&
    `
    margin-bottom: 30px;
  `};

  ${props =>
    props.large &&
    `
    margin-bottom: 40px;
  `};

  ${props =>
    props.xlarge &&
    `
    margin-bottom: 50px;
  `};

  ${props =>
    props.xxlarge &&
    `
    margin-bottom: 60px;
  `};

  ${props =>
    props.xxxlarge &&
    `
    margin-bottom: 80px;
  `};
`;

Spacer.propTypes = {
  small: PropTypes.bool,
  medium: PropTypes.bool,
  large: PropTypes.bool,
  xlarge: PropTypes.bool,
  xxlarge: PropTypes.bool,
  xxxlarge: PropTypes.bool
};

export default Spacer;