text: import React from 'react';
  import PropTypes from 'prop-types';
  import Link from 'next/link';
  import Fade from 'react-reveal/Fade';
  import Box from 'reusecore/src/elements/Box';
  import Text from 'reusecore/src/elements/Text';
  import Heading from 'reusecore/src/elements/Heading';
  import Button from 'reusecore/src/elements/Button';
  import Card from 'reusecore/src/elements/Card';
  import Image from 'reusecore/src/elements/Image';
  import Container from '../../../components/UI/Container';
  
  import InfoSectionWrapper from './info.style';
  import ImageOne from '../../../assets/image/saasTwo/dash-1.png';
  import ImageTwo from '../../../assets/image/saasTwo/dash-2.png';
  
  const InfoSection = ({
    row,
    col,
    title,
    description,
    button,
    textArea,
    imageArea,
    imageAreaRow,
    imageWrapper,
    imageWrapperOne,
    imageWrapperTwo,
    textAreaRow,
  }) => {
    return (
      <InfoSectionWrapper>
        <Container fullWidth noGutter className="info-sec-container">
          <Box {...row} {...imageAreaRow}>
            <Box {...col} {...imageArea} className="image_area">
              <Card {...imageWrapper} {...imageWrapperOne}>
                <Fade left>
                  <Image src={ImageOne} alt="Info Image One" />
                </Fade>
              </Card>
              <Card {...imageWrapper} {...imageWrapperTwo}>
                <Fade bottom>
                  <Image src={ImageTwo} alt="Info Image Two" />
                </Fade>
              </Card>
            </Box>
          </Box>
        </Container>
        <Container>
          <Box {...row} {...textAreaRow}>
            <Box {...col} {...textArea}>
              <Heading
                {...title}
                content="Make your website growth with next level visitors"
              />
              <Text
                {...description}
                content="For Enhanced performance we use LiteSpeed Web Server, HTTP/2, PHP7. We make your website faster, which will help you to increase search ranking!."
              />
              <Box>
                <Link href="#">
                  <a>
                    <Button {...button} title="HOW IT WORKS" />
                  </a>
                </Link>
              </Box>
            </Box>
          </Box>
        </Container>
      </InfoSectionWrapper>
    );
  };
  
  InfoSection.propTypes = {
    row: PropTypes.object,
    col: PropTypes.object,
    title: PropTypes.object,
    description: PropTypes.object,
    button: PropTypes.object,
    textArea: PropTypes.object,
    imageArea: PropTypes.object,
    imageAreaRow: PropTypes.object,
    imageWrapper: PropTypes.object,
    imageWrapperOne: PropTypes.object,
    imageWrapperTwo: PropTypes.object,
    textAreaRow: PropTypes.object,
  };
  
  InfoSection.defaultProps = {
    row: {
      flexBox: true,
      flexWrap: 'wrap',
      ml: '-15px',
      mr: '-15px',
    },
    textAreaRow: {
      flexDirection: 'row-reverse',
    },
    col: {
      pr: '15px',
      pl: '15px',
    },
    textArea: {
      width: ['100%', '100%', '50%', '50%', '42%'],
    },
    imageArea: {
      width: ['100%', '100%', '50%', '50%', '55%'],
      flexBox: true,
    },
    imageWrapper: {
      boxShadow: 'none',
    },
    imageWrapperOne: {
      mr: ['-250px', '-250px', '-200px', '-250px', '-400px'],
    },
    imageWrapperTwo: {
      alignSelf: 'flex-end',
      mb: '-60px',
    },
    title: {
      fontSize: ['26px', '32px', '36px', '40px', '48px'],
      fontWeight: '400',
      color: '#0f2137',
      letterSpacing: '-0.025em',
      mb: '20px',
      lineHeight: '1.25',
    },
    description: {
      fontSize: ['15px', '15px', '15px', '16px', '16px'],
      color: '#343d48cc',
      lineHeight: '2',
      mb: '33px',
    },
    button: {
      type: 'button',
      fontSize: '14px',
      fontWeight: '600',
      borderRadius: '4px',
      pl: '22px',
      pr: '22px',
      colors: 'secondaryWithBg',
    },
  };
  
  export default InfoSection;
  