import './style.scss'
import Label from "components/Label";
import Button from "components/common/Buttons";
import { useAnimation, useAnimationBgParalax } from 'hooks/useAnimation';
import { useRef } from 'react';
import { useSelector } from 'react-redux';
import { selectAboutUsCareer } from 'store/slices/AboutSlice';
import careerBg from 'assets/backgrounds/get-started.svg'
import careerBgMob from 'assets/backgrounds/getStartedBgMob.svg'
import useMediaQuery from 'hooks/useMediaQuery';

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

    const career = useSelector(selectAboutUsCareer)
    const container = useRef();
    useAnimation({
        items: ['.career h2', '.career body2', '.career__button'],
        container,
        dependencies: [isLoading],
    })
    useAnimationBgParalax({
        items: ['.career__bg'],
        container,
        dependencies: [isLoading],
    })

    const { button_text, description, tag, title } = career

    return (
        <section ref={container} className="container career">
            <Label text={tag} type="outline" />
            <h2 className="h2">{title}</h2>
            <div className='body2'>{description}</div>
            <div className='career__button'>
                <Button type={"white"} text={button_text} forPopup={true} />
            </div>
            <img className='career__bg' src={isTablet ? careerBgMob : careerBg} alt="" />
        </section>
    );
}

export default Career;

• [F] index.jsx
  Delete
• [F] style.scss
  Delete