import React, {useContext} from 'react';
import {MDBBtn, MDBCardImage, MDBContainer, MDBIcon, MDBTypography} from "mdb-react-ui-kit";
import Image from 'next/image'
import IMGAE from '../../../public/resource/Smart/coins-outline.webp'
import {HandlePage} from "../../../lib/HnadelPagge";
const StepOne = () => {
    const {setPage} = useContext(HandlePage)
    return (
        <div className={'flex flex-column'}>
            <div className={'mt-4'}>
                <MDBTypography style={{ lineHeight: 1.7 }} className={'text-right mr-4 text-primary-teal font-weight-bold bk-med'} variant={'h3'}>روش سرمایه گذاری خود
                    <br />
                    ... را هوشمندانه انتخاب کنید
                </MDBTypography>
            </div>

            <div dir={'rtl'} className={'text-right mr-4'}>
                <p className={'bk-light text-sm'}>با پاسخ به سوالات مشاوره هوشمند با هر بودجه ای قادر به سرمایه گذاری خواهید بود. </p>
                <span className={'text-sm bk-med flex align-items-center'}>
                    <MDBCardImage className={'ml-2'} src={IMGAE} width={30} height={30} />
                    آینده ای پرسود برای خود و خانواده خود بسازید</span>
            </div>
            <div className="d-grid gap-5 mt-5 col-6 mx-auto">
                <MDBBtn onClick={() => setPage(2)} className={'bg-primary-teal text-md text-center bk-med'}>
                    <MDBIcon icon='chevron-left' className={'mr-5'} />
                    شروع کنید
                </MDBBtn>
            </div>

        </div>
    );
};

export default StepOne;