import React from 'react';

interface WhyChooseTwoProps {
    reverse?: boolean;
}

const WhyChooseTwo: React.FC<WhyChooseTwoProps> = ({ reverse = false }) => {
    return (
        <section className="why-choose-two">
            <img src="https://bracketweb.com/pelocishtml/assets/images/shapes/why-chosse-2-shape.png" alt="pelocis" className="why-choose-two__shape-three" />
            <div className="container">
                <div className={`row ${reverse ? 'flex-row-reverse' : ''}`}>
                    <div className="col-xl-6">
                        <div className="why-choose-two__content">
                            <div className="sec-title">
                                <div className="sec-title__shape"></div>
                                <h6 className="sec-title__tagline">WHY CHOOSE US</h6>
                                <h3 className="sec-title__title">We Providing&nbsp;Psychology People <br /> Choose of Promoting</h3>
                            </div>
                            <p className="why-choose-two__text">
                                Business tailored design, management &amp; support services Business
                                business agency elit, sed do eiusmod tempor &nbsp;majority have
                                in some we form, by injected humour solution.
                            </p>
                            <div className="why-choose-two__box">
                                <ul className="why-choose-two__list">
                                    <li className="why-choose-two__item">
                                        <div className="why-choose-two__count"></div>
                                        <div className="why-choose-two__icon">
                                            <span className="fa-solid fa-lightbulb"></span>
                                        </div>
                                        <div className="why-choose-two__item__content">
                                            <h3 className="why-choose-two__item__title">Family Service Psychology</h3>
                                            <p className="why-choose-two__item__text">
                                                Supporting individuals in overcoming service
                                            </p>
                                        </div>
                                    </li>
                                    <li className="why-choose-two__item">
                                        <div className="why-choose-two__count"></div>
                                        <div className="why-choose-two__icon">
                                            <span className="fa-solid fa-brain"></span>
                                        </div>
                                        <div className="why-choose-two__item__content">
                                            <h3 className="why-choose-two__item__title">Cognitive off Psychology</h3>
                                            <p className="why-choose-two__item__text">
                                                Supporting individuals in overcoming service
                                            </p>
                                        </div>
                                    </li>
                                    <li className="why-choose-two__item">
                                        <div className="why-choose-two__count"></div>
                                        <div className="why-choose-two__icon">
                                            <span className="fa-solid fa-people-roof"></span>
                                        </div>
                                        <div className="why-choose-two__item__content">
                                            <h3 className="why-choose-two__item__title">Relationship Psychology</h3>
                                            <p className="why-choose-two__item__text">
                                                Supporting individuals in overcoming service
                                            </p>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div className="col-xl-6">
                        <div className="pelocis-stretch-element-inside-column" style={reverse ? { marginLeft: '-367.812px', marginRight: '0px' } : { marginLeft: '0px', marginRight: '-367.812px' }}>
                            <div className="why-choose-two__shape-one">
                                <img src="https://bracketweb.com/pelocishtml/assets/images/resources/why-choose-two-img-1.png" alt="pelocis" />
                            </div>
                            <div className="why-choose-two__shape-two"></div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    );
};

export default WhyChooseTwo;