text: import React from 'react';
  import { Button } from '../ButtonElements';
  import {
    InfoContainer,
    InfoWrapper,
    InfoRow,
    Column1,
    Column2,
    TextWrapper,
    TopLine,
    Heading,
    Subtitle,
    BtnWrap,
    ImgWrap,
    Img,
  } from './InfoElements';
  // import react reveal library to implement animation and effects
  import Slide from 'react-reveal/Slide';
  
  const InfoSection = ({
    lightBg,
    imgStart,
    topLine,
    lightText,
    headline,
    description,
    buttonLabel,
    img,
    alt,
    id,
    primary,
    darkText,
    dark,
    dark2,
  }) => {
    return (
      <>
        <InfoContainer lightBg={lightBg} id={id}>
          <InfoWrapper>
            <InfoRow imgStart={imgStart}>
              <Column1>
                <Slide left duration={3000}>
                  <TextWrapper>
                    <TopLine>{topLine}</TopLine>
  
                    <Heading lightText={lightText}>{headline}</Heading>
                    <Subtitle darkText={darkText}>{description}</Subtitle>
                    <BtnWrap>
                      <Button
                        to='contact'
                        smooth={true}
                        duration={500}
                        spy={true}
                        exact='true'
                        offset={-80}
                        primary={primary ? 1 : 0}
                        dark={dark ? 1 : 0}
                        dark2={dark2 ? 1 : 0}
                      >
                        {buttonLabel}
                      </Button>
                    </BtnWrap>
                  </TextWrapper>
                </Slide>
              </Column1>
  
              <Column2>
                <Slide right duration={3000}>
                  <ImgWrap>
                    <Img src={img} alt={alt} />
                  </ImgWrap>
                </Slide>
              </Column2>
            </InfoRow>
          </InfoWrapper>
        </InfoContainer>
      </>
    );
  };
  
  export default InfoSection;
  