import React, { useState } from "react";
import {
  View,
  Text,
  TextInput,
  TouchableOpacity,
  StyleSheet,
} from "react-native";
import { Ionicons } from "@expo/vector-icons";
import { useNavigation } from "@react-navigation/native";

const DonasiVerifikasi = () => {
  const navigation = useNavigation();
  const [pin, setPin] = useState("");

  const handlePinSubmit = () => {
    if (pin.length === 6) {
      alert("Pembayaran Tervalidasi");
    } else {
      alert("PIN harus 6 digit");
    }
  };

  return (
    <View style={styles.container}>
      <View style={styles.header}>
        <TouchableOpacity
          style={styles.backButton}
          onPress={() => navigation.goBack()}
        >
          <Ionicons name="arrow-back" size={24} color="#333" />
        </TouchableOpacity>
        <Text style={styles.title}>VERIFIKASI PIN</Text>
      </View>

      <Text style={styles.instructionText}>
        Masukkan PIN Anda untuk melanjutkan pembayaran
      </Text>

      <TextInput
        style={styles.pinInput}
        secureTextEntry
        keyboardType="numeric"
        maxLength={6}
        placeholder="Masukkan PIN"
        value={pin}
        onChangeText={setPin}
      />

      <TouchableOpacity
        style={styles.submitButton}
        // onPress={handlePinSubmit}
        onPress={() => navigation.navigate("Donasiberhasil")}
      >
        <Text style={styles.submitButtonText}>Konfirmasi PIN</Text>
      </TouchableOpacity>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
    backgroundColor: "#f9f9f9",
  },
  header: {
    flexDirection: "row",
    alignItems: "center",
    marginBottom: 30,
    marginTop: 30,
  },
  backButton: {
    marginRight: 10,
  },
  title: {
    fontSize: 22,
    fontWeight: "bold",
    color: "#333",
  },
  instructionText: {
    fontSize: 16,
    color: "#666",
    marginVertical: 15,
  },
  pinInput: {
    borderBottomWidth: 2,
    borderColor: "#333",
    fontSize: 20,
    paddingVertical: 10,
    textAlign: "center",
    marginVertical: 20,
  },
  submitButton: {
    backgroundColor: "#2D572C",
    paddingVertical: 15,
    borderRadius: 8,
    alignItems: "center",
  },
  submitButtonText: {
    color: "#fff",
    fontSize: 16,
    fontWeight: "bold",
  },
});

export default DonasiVerifikasi;