import React from "react";
import { Image, StyleSheet, View } from "react-native";
import MapView from 'react-native-maps';

import colors from "../config/colors";

function ViewImageScreen(props) {
  return (
    <View style={styles.container}>
      <View style={styles.closeIcon}></View>
      <View style={styles.deleteIcon}></View>
      <MapView style={styles.mapStyle} />
      <Image
        resizeMode="contain"
        style={styles.image}
        source={require("../assets/wp6.jpg")}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  closeIcon: {
    width: 50,
    height: 50,
    backgroundColor: colors.primary,
    position: "absolute",
    top: 40,
    left: 30,
  },
  container: {
    backgroundColor: colors.black,
    flex: 1,
  },
  deleteIcon: {
    width: 50,
    height: 50,
    backgroundColor: colors.secondary,
    position: "absolute",
    top: 40,
    right: 30,
  },
  image: {
    width: "100%",
    height: "100%",
  },
  mapStyle: {
    width: 300,
    height: 300,
  },
});

export default ViewImageScreen;