import React from "react";
import { StyleSheet, View } from "react-native";

import { Image, Text, TouchableOpacity, ScrollView } from "react-native";
import assets from "../config/assets"
//1/3

function SharingDataScreen({ navigation }) {
  return (
    <View style={styles.container}>
      <ScrollView>
        <View style={{ flexDirection: "row", justifyContent: "space-around" }}>
          <TouchableOpacity
            style={{ alignItems: "center" }}
            onPress={() => navigation.navigate("FloodSharingData")}
          >
            <Image
              style={styles.floodingLogo}
              source={assets.floodZones.floodIcon}
            />
            <Text style={styles.text}>Pontos de {"\n"}alagamento</Text>
          </TouchableOpacity>

          <TouchableOpacity
            style={{ alignItems: "center" }}
            onPress={() => navigation.navigate("RainSharingData")}
          >
            <Image
              style={styles.floodingLogo}
              source={assets.rainLevel.rain_2_5}
            />
            <Text style={styles.text}>Chuva</Text>
          </TouchableOpacity>
        </View>

        <View style={{ flexDirection: "row", justifyContent: "space-around" }}>
          <TouchableOpacity
            style={{ alignItems: "center" }}
            onPress={() => navigation.navigate("PluviometerSharingData")}
          >
            <Image style={styles.floodingLogo} source={assets.pluviometer} />
            <Text style={styles.text}>Diário do{"\n"}pluviômetro</Text>
          </TouchableOpacity>

          <TouchableOpacity
            style={{ alignItems: "center" }}
            onPress={() => navigation.navigate("RiverFloodData")}
          >
            <Image
              style={styles.floodingLogo}
              source={assets.riverLevel.riverIcon}
            />
            <Text style={styles.text}>Nível de água {"\n"}no rio</Text>
          </TouchableOpacity>
        </View>
      </ScrollView>
    </View>
  );
}

const styles = StyleSheet.create({
  text: {
    fontSize: 14,
    textAlign: "center",
    marginTop: 10,
  },
  rainLogo: {
    width: 110,
    height: 100,
    margin: 30,
  },
  floodingLogo: {
    width: 85,
    height: 85,
    marginTop: 70,
  },
  container: {
    paddingHorizontal: 10,
    paddingBottom: 10,
    flex: 1

  },
});





export default SharingDataScreen;