/home/bdqbpbxa/demo-subdomains/ping-proxies.goodface.com.ua/src/components/Sections/FAQ/index.jsx
import './styles.scss';
import ColumnWrapper from 'Layout/ColumWraper';
import FAQSideText from './FAQSideText';
import FAQSectionItems from './FAQSection';
import { useRef } from 'react';
import { useAnimation } from 'hooks/useAnimation';




const FAQ = ({ data, isLoading }) => {

    const container = useRef();
    const { tag,
        title,
        help_text,
        help_link,
        // help_title,
        help_link_text,
        question_section } = data
    const sideText = {
        title: help_text,
        help_link_text: help_link_text,
        help_link: help_link,
    }
    useAnimation({
        items: ['.faq-sidetext', '.faq-section'],
        container,
        dependencies: [isLoading],
    })
    return (
        <section ref={container} className="faq">
            <ColumnWrapper SideText={<FAQSideText
                tag={tag}
                sideTitle={title}
                desc={help_text}
                button_link={help_link}
                title={help_text}
                button_text={help_link_text} />} >
                <FAQSectionItems sections={question_section} sideText={sideText} />
            </ColumnWrapper>
        </section>
    );
};

export default FAQ;