import React, {useState, useEffect} from 'react';
import MapView, {Marker} from 'react-native-maps';
import {StyleSheet, Text, View, Dimensions} from 'react-native';
import screen from '../constants/layout';
import StartAndFinishLocationComponent from "../components/CurrentUserLocationComponent";


const Maps = () => {
    const [initialRegion, setInitialRegion] = useState(
        {
            latitude: 37.56647,
            longitude: 126.977963,
            latitudeDelta: 0.3922,
            longitudeDelta: 0.3421
        });

    return (
        <View style={styles.container}>
            <Text style={styles.textStyle}>Current User Location</Text>
            <StartAndFinishLocationComponent/>
            <MapView
                style={styles.mapStyle}
                initialRegion={initialRegion}
            >
                <Marker
                    coordinate={initialRegion}
                    title="this is a marker"
                    description="this is a marker example">
                </Marker>

            </MapView>
        </View>
    )
};

export default Maps;

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#fff',
        alignItems: 'center',
    },
    mapStyle: {
        width: screen.width,
        height: screen.height / 2,
    },
    textStyle: {
        fontWeight: 'bold',
        fontSize: 20,
        color: 'grey',
        marginBottom: 20,
    }
});