import React, { useState } from "react";
import {
  View,
  Text,
  TouchableOpacity,
  StyleSheet,
  ScrollView,
} from "react-native";
import { Ionicons, MaterialIcons } from "@expo/vector-icons"; // Importing icons

const MetodeDonasi = ({ navigation }) => {
  const [selectedPayment, setSelectedPayment] = useState(null);

  // Handle Payment Method Selection
  const handlePaymentSelection = (method) => {
    setSelectedPayment(method);
  };

  return (
    <ScrollView style={styles.container}>
      {/* Header with Back Button */}
      <View style={styles.header}>
        <TouchableOpacity
          style={styles.backButton}
          onPress={() => navigation.goBack()}
        >
          <Ionicons name="arrow-back" size={24} color="#333" />
        </TouchableOpacity>
        <Text style={styles.title}>DONASI</Text>
      </View>

      {/* Metode Pembayaran */}
      <View style={styles.paymentMethodSection}>
        <Text style={styles.sectionTitle}>Metode Pembayaran</Text>
        <View style={styles.paymentButtonContainer}>
          <TouchableOpacity
            style={[
              styles.paymentButton,
              selectedPayment === "Dana" && styles.selectedPaymentButton,
            ]}
            onPress={() => handlePaymentSelection("Dana")}
          >
            <View style={styles.paymentButtonContent}>
              <MaterialIcons
                name="payment"
                size={24}
                color={selectedPayment === "Dana" ? "#4CAF50" : "#333"}
              />
              <Text
                style={
                  selectedPayment === "Dana"
                    ? styles.selectedPaymentText
                    : styles.paymentText
                }
              >
                Transfer DANA
              </Text>
            </View>
          </TouchableOpacity>

          <TouchableOpacity
            style={[
              styles.paymentButton,
              selectedPayment === "Transfer" && styles.selectedPaymentButton,
            ]}
            onPress={() => handlePaymentSelection("Transfer")}
          >
            <View style={styles.paymentButtonContent}>
              <Ionicons
                name="card"
                size={24}
                color={selectedPayment === "Transfer" ? "#4CAF50" : "#333"}
              />
              <Text
                style={
                  selectedPayment === "Transfer"
                    ? styles.selectedPaymentText
                    : styles.paymentText
                }
              >
                Transfer Bank
              </Text>
            </View>
          </TouchableOpacity>
        </View>
      </View>

      {/* Button Selanjutnya */}
      <TouchableOpacity
        style={styles.nextButton}
        // onPress={() => alert("Pilih metode pembayaran")}
        onPress={() => navigation.navigate("KonfirmasiPembayaran")}
      >
        <Text style={styles.nextButtonText}>Selanjutnya</Text>
      </TouchableOpacity>
    </ScrollView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
    backgroundColor: "#f9f9f9",
  },
  header: {
    flexDirection: "row",
    alignItems: "center",
    marginBottom: 20,
    marginTop: 30,
  },
  backButton: {
    marginRight: 10,
  },
  title: {
    fontSize: 22,
    fontWeight: "bold",
    color: "#333",
  },
  paymentMethodSection: {
    marginBottom: 30,
  },
  sectionTitle: {
    fontSize: 18,
    fontWeight: "bold",
    color: "#333",
    marginBottom: 15,
  },
  paymentButtonContainer: {
    flexDirection: "row",
    gap: 15,
    marginBottom: 30,
  },
  paymentButton: {
    flex: 1,
    borderWidth: 1,
    borderColor: "#ddd",
    paddingVertical: 15,
    borderRadius: 8,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
  selectedPaymentButton: {
    borderColor: "#2D572C",
    backgroundColor: "#e0f7e0",
  },
  paymentButtonContent: {
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "center",
    gap: 10,
  },
  paymentText: {
    fontSize: 16,
    color: "#333",
  },
  selectedPaymentText: {
    fontSize: 16,
    color: "#2D572C",
  },
  nextButton: {
    backgroundColor: "#2D572C",
    paddingVertical: 15,
    borderRadius: 8,
    alignItems: "center",
  },
  nextButtonText: {
    color: "#fff",
    fontSize: 16,
    fontWeight: "bold",
  },
});

export default MetodeDonasi;