import React, {useContext} from 'react';
import {
    MDBCardImage,
    MDBContainer,
    MDBIcon,
    MDBInputGroup,
    MDBInputGroupElement, MDBInputGroupText,
    MDBTypography
} from "mdb-react-ui-kit";
import {ListItem, SlideFade, UnorderedList} from "@chakra-ui/react";
import Love from '../../../public/resource/Smart/love-heart-outline.webp'
import {HandlePage} from "../../../lib/HnadelPagge";
const StepFive = () => {
    const {setPhoneNumber} = useContext(HandlePage)
    return (
        <SlideFade in={true} offsetY='20px'>
            <div className={'flex flex-column'}>
                <div className={'mt-4'}>
                    <MDBTypography style={{ lineHeight: 1.7 }} className={'text-center mr-4 text-primary-teal font-weight-bold bk-med'} variant={'h3'}>
                        سپاس از همراهی  شما
                    </MDBTypography>
                </div>
                <div className={'flex justify-content-center mt-2'}>
                    <MDBCardImage className={'ml-2'} src={Love} width={150} height={150} />
                </div>
                <div className={'flex justify-content-center flex-column mt-2'}>
                    <div className={'flex justify-content-center'}>
                        <strong className={'bk-med text-center text-md'}>
                              در صورت تمایل به خرید سهام
                            <br />
                             شماره تلفن خود را وارد کنید
                            </strong>
                    </div>
                    <div className={'flex justify-content-center mt-2'}>
                    <div className='lg:mx-20 sm:mx-5'> 
                    <MDBInputGroup>
                                <MDBInputGroupElement
                                    name="PhoneNumber"
                                    dir={'rtl'}
                                    onChange={(e) => setPhoneNumber(e.target.value)}
                                    id="PhoneNumber"
                                    placeholder=' شماره موبایل خود را وارد کنید '
                                    type='text' />
                                <MDBInputGroupText>
                                    <MDBIcon fas icon="phone" />
                                </MDBInputGroupText>
                            </MDBInputGroup>
                        </div>
                    </div>
                </div>

            </div>
        </SlideFade>
    );
};

export default StepFive;