import React,{useState} from 'react';
import {
    MDBBtn,
    MDBIcon,
    MDBModal,
    MDBModalBody, MDBModalContent,
    MDBModalDialog,
    MDBModalFooter,
    MDBModalHeader, MDBModalTitle
} from "mdb-react-ui-kit";

const Paralax = () => {
    const [basicModal, setBasicModal] = useState(false);
    if (basicModal){
        setTimeout(()=> {
            setBasicModal(false)
        },2000)
    }

    return (
        <div className='bg-image mt-5 d-flex flex-md-column flex-sm-column ' style={{ maxWidth: '1080rem' }}>
            <img  style={{ width: '100%' }}  src={'https://mehrara-api.iran.liara.run/panel-public/uploads/1653317481HLqP4.jpg'} alt="Picture of the author" />
            <div className='mask' style={{ backgroundColor: 'rgba(0, 0, 0, 0.6)' }}>
                <div className='d-flex flex-md-column flex-sm-column justify-content-center align-items-center h-100 dana'>
                    <h2 className='text-white p-5 mb-0'>
                        <MDBBtn  onClick={() => setBasicModal(true)} size='lg' color='success'>
                            دریافت نوبت آنلاین
                            <MDBIcon style={{ paddingLeft: "15px",paddingTop: "5px",maxWidth: "100px",maxHeight: '50px' }} className='me-2 '  icon='clock' />
                        </MDBBtn>
                    </h2>
                    {/*<h3 style={{marginRight: "5%"}} className='text-white  mb-0'> 021 - 2842 6945 تماس تلفنی </h3>*/}
                </div>
            </div>
            {process.browser &&
            <MDBModal show={basicModal}  tabIndex='-1'>
                <MDBModalDialog>
                    <MDBModalContent>
                        <MDBModalHeader>
                            <MDBModalTitle className={'d-flex justify-content-start'} >این بخش در حال حاضر دسترس نیست </MDBModalTitle>
                            <MDBBtn className='btn-close left left-align d-flex  justify-content-end' color='none' onClick={() => setBasicModal(false)}></MDBBtn>
                        </MDBModalHeader>
                        <MDBModalBody className={'d-flex justify-content-around'}>
                            <MDBIcon  className='ms-1 text-danger' icon='exclamation' size='7x' />
                        </MDBModalBody>

                        <MDBModalFooter className={'d-flex justify-content-around'}>
                            <MDBBtn  color='secondary' onClick={() => setBasicModal(false)}>
                                بستن
                            </MDBBtn>
                        </MDBModalFooter>
                    </MDBModalContent>
                </MDBModalDialog>
            </MDBModal>
            }

        </div>
    );
};


export default  Paralax;