import React, { useState } from 'react';
import AppContainer from "../appContainer";
import Image from "next/image";
import { MDBCol, MDBContainer, MDBIcon, MDBInputGroupText, MDBRow, MDBTypography } from "mdb-react-ui-kit";
import Connect from "../components/connect";
import { Map, Marker, ZoomControl } from "pigeon-maps"
import { osm } from 'pigeon-maps/providers'

import { maptiler } from 'pigeon-maps/providers'

const ContactUs = () => {
    const Parallax = ({ quality }) => {
        return `/resource/parallax/contact-us.jpg `;
    }

    const maptilerProvider = maptiler('tWRA4K0zge6W26KAmgBX', 'streets')
    const [hue, setHue] = useState(0)
    const color = `hsl(${hue % 490}deg 80% 30%)`

    return (
        <>
            <AppContainer title={'تماس با ما'}>
                <div className="parallax-container">
                    <h1 className={'center-align text-white  header_back service-text dana font-weight-bold'}> تماس با  ما    </h1>
                    <Image
                        loader={Parallax}
                        src="Parallax.png"
                        className={'responsive-img shadow-5'}
                        alt="بیمارستان مهر پرند؛ آدرس و راه‌های ارتباطی"
                        width={2050}
                        height={950}
                    />
                </div>

                <br />
                <div className='lg:mx-20 sm:mx-5'> 
                <br />
                    <h3 className={'right-align'}>
                        آدرس
                        <MDBIcon style={{ paddingLeft: 5 }} className='ms-1' icon='map-marker-alt' size='xl' />
                    </h3>
                    <br />
                    <MDBTypography style={{ borderLeft: 'none', borderRight: '6px solid ', backgroundColor: '#F0F0F0' }} note noteColor='dark' className='mb-0'>
                        <MDBRow>
                            <MDBTypography className={'dana right-align'} >
                                تهران - شهر پرند - فاز 5 - بلوار شهید قاسم سلیمانی - بلوار رسوال اکرم - بیمارستان مهر پرند
                            </MDBTypography>
                        </MDBRow>
                    </MDBTypography>
                    <br /><br />
                    <h3 className={'right-align'}>
                        تماس با ما
                        <MDBIcon style={{ paddingLeft: 5 }} className='ms-1' icon='phone-square' size='xl' />
                    </h3>
                    <br />
                    <MDBTypography style={{ backgroundColor: '#F0F0F0' }} note noteColor='dark' className='mb-0'>
                        <MDBRow>
                            {/*<MDBTypography className={'dana'} >*/}
                            {/*    <MDBIcon style={{ paddingRight: 5 }} className='ms-1' icon='phone-alt' size='sm' />*/}
                            {/*    <a style={{ color: 'black' }} href={'tel:02153457000'}>021 5345 7000  </a>*/}
                            {/*</MDBTypography>*/}
                         
                            <MDBTypography className={'dana'} href={'tel:02153457000'}>
                                <MDBIcon style={{ paddingRight: 5 }} className='ms-1' icon='phone-alt' size='sm' />
                                <a style={{ color: 'black' }} href={'tel:02153457000'}>021-53457000</a>
                            </MDBTypography>
                            <MDBTypography className={'dana'} href={'tel:09367529435'}>
                                <MDBIcon style={{ paddingRight: 5 }} className='ms-1' icon='envelope-square' size='sm' />
                                contact-us@miphospital.ir
                            </MDBTypography>

                            <MDBTypography className={'dana'} href={'tel:09367529435'}>
                                <MDBIcon style={{ paddingRight: 5 }} className='ms-1' fab icon="instagram" size='sm' />
                                <a target={'_blank'} style={{ color: 'black' }} href={'https://www.instagram.com/miphospital/'}>miphospital</a>
                            </MDBTypography>
                        </MDBRow>
                    </MDBTypography>
                    <br />
                    <div>
                        <Map
                            provider={maptilerProvider}
                            provider={osm}
                            dprs={[1, 2]} // this provider supports HiDPI tiles
                            height={400}
                            defaultCenter={[35.48787, 50.92102]}
                            defaultZoom={15}
                        >
                            <Marker
                                width={50}
                                anchor={[35.48787, 50.92102]}
                                color={color}
                                onClick={() => setHue(hue + 20)}
                            />
                            <ZoomControl />
                        </Map>
                    </div>
                    <Connect />
                    <br />
                </div>
            </AppContainer>
        </>
    );
};

export default ContactUs;