import React, { useEffect } from "react";
import { View, Text, StyleSheet, ActivityIndicator } from "react-native";
import { useNavigation } from "@react-navigation/native";

const LoadingKontribusi = () => {
  const navigation = useNavigation();

  // Menunggu selama 2 detik dan kemudian pindah ke halaman Home
  useEffect(() => {
    const timer = setTimeout(() => {
      navigation.replace("KontribusiBerhasil"); // Ganti 'Home' dengan nama screen tujuan
    }, 2000);

    return () => clearTimeout(timer); // Membersihkan timer saat komponen dihapus
  }, [navigation]);

  return (
    <View style={styles.container}>
      <View style={styles.overlay}>
        <ActivityIndicator size="large" color="#fff" />
        <Text style={styles.loadingText}>Tunggu sebentar...</Text>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#435739", // Warna hijau gelap sebagai latar belakang
  },
  overlay: {
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#435739", // Transparansi gelap untuk overlay
    padding: 20,
    borderRadius: 10,
  },
  loadingText: {
    marginTop: 10,
    fontSize: 16,
    color: "#fff",
  },
});

export default LoadingKontribusi;