import React, {useEffect, useState} from 'react';
import {View, StyleSheet, Keyboard} from 'react-native';
import MapView, {Marker, PROVIDER_GOOGLE} from 'react-native-maps';
import {url} from '../url';
import Button from './Button';
import Search from './Search';
import {BLACK, PRIMERY, RED, WHITE} from '../color';

export default function Map({
  lat,
  long,
  showsUserLocation,
  latDelta,
  longDelta,
  children,
}) {
  return (
    <View style={styles.mapStyle}>
      <MapView
        style={styles.mapStyle}
        provider={PROVIDER_GOOGLE}
        initialRegion={{
          latitude: lat,
          longitude: long,
          latitudeDelta: latDelta,
          longitudeDelta: longDelta,
        }}
        showsUserLocation={showsUserLocation}>
        {children}
        {/* {actionLocation &&
          actionLocation.length > 0 &&
          actionLocation.map((loc, index) => (
            <Marker
              key={index} // 각 Marker에 고유한 키를 할당
              coordinate={loc}
              pinColor={RED}
              title="action Location"
            />
          ))} */}
      </MapView>
      {/* <View style={styles.buttonstyle}>
        <View style={styles.markerButtonStyle}>
          <Button
            title={'마커 표시'}
            onPress={sendPostRequest}
            color={WHITE}
            width={'100%'}
            textAlign={'center'}
            padding={10}
            backgroundColor={PRIMERY}
          />
        </View>
      </View> */}
    </View>
  );
}

const styles = StyleSheet.create({
  // markerButtonStyle: {
  //   width: '45%',
  //   position: 'absolute',
  //   bottom: 7,
  //   left: 0,
  // },
  mapStyle: {
    flex: 1,
  },

  // buttonstyle: {
  //   marginHorizontal: 15,
  // },
});