import React from "react";
import { View, Text, Button, StyleSheet, TouchableOpacity } from "react-native";
import { MaterialCommunityIcons } from "@expo/vector-icons";

const KontribusiBerhasil = ({ navigation }) => {
  return (
    <View style={styles.container}>
      <View style={styles.content}>
        <MaterialCommunityIcons name="cloud-check" size={140} color="white" />
        <Text style={styles.title}>Daftar Berhasil !</Text>

        <Text style={styles.subMessage}>
          Silahkan masuk untuk mencoba fitur yang ada di EcoMap!
        </Text>
        <TouchableOpacity
          style={styles.button}
          // onPress={() => console.log("Daftar Submit")}
          onPress={() => navigation.navigate("AksesAkun")}
        >
          <Text style={styles.buttonText}>MASUK</Text>
        </TouchableOpacity>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#435739", // Warna hijau gelap
  },
  content: {
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#435739", // Transparansi gelap untuk efek overlay
    padding: 30,
    borderRadius: 15,
    width: "100%",
    alignItems: "center",
  },
  title: {
    fontSize: 24,
    fontWeight: "bold",
    color: "#fff",
    marginTop: 0,
  },
  message: {
    fontSize: 16,
    color: "#fff",
    textAlign: "center",
    marginTop: 10,
  },
  subMessage: {
    fontSize: 15,
    color: "#fff",
    textAlign: "center",
    marginTop: 10,
    padding: 3,
  },
  button: {
    backgroundColor: "#fff",
    paddingVertical: 10,
    paddingHorizontal: 40,
    borderRadius: 5,
    marginTop: 20,
    borderRadius: 25,
    fontWeight: "bold",
  },
  buttonText: {
    fontWeight: "bold",
    fontSize: 15,
  },
});

export default KontribusiBerhasil;