import './styles.scss'
import Button from 'components/common/Buttons';
import { useRef } from 'react';
import { useAnimation, useAnimationBgParalax } from 'hooks/useAnimation';
import ctaBg from 'assets/backgrounds/CTA.svg'
import ctaBgMob from 'assets/backgrounds/ctaBgMob.svg'
import useMediaQuery from 'hooks/useMediaQuery';


const CTA = ({ cta, isLoading }) => {
    const isTablet = useMediaQuery('max-width: 768px')

    const { title, button_text, description } = cta

    const container = useRef();
    useAnimation({
        items: ['.cta'],
        container,
        dependencies: [isLoading],
    })
    useAnimationBgParalax({
        items: ['.cta__bg'],
        container,
        dependencies: [isLoading],
    }
    )

    return (
        <section ref={container} className="container">
            <div className="cta">
                <h2>{title}</h2>
                <div className='body1'>{description}</div>
                <Button text={button_text} type={"white"} forPopup={true} />
                <img className='cta__bg' src={isTablet ? ctaBgMob : ctaBg} alt="" />
            </div>

        </section>
    );
}

export default CTA;

• [F] index.jsx
  Delete
• [F] mockData.js
  Delete
• [F] styles.scss
  Delete