// ResetSandi.js (Halaman Pemilihan Metode)

import React, { useState } from "react";
import { View, Text, TouchableOpacity, StyleSheet } from "react-native";
import { Ionicons } from "@expo/vector-icons"; // Import Ionicons untuk ikon

export default function lupasandi({ navigation }) {
  const [method, setMethod] = useState(null); // Untuk menyimpan metode yang dipilih (email atau wa)

  // Fungsi untuk menavigasi ke halaman berikutnya dengan parameter 'method'
  const handleNavigate = (method) => {
    setMethod(method);
    navigation.navigate("InputContact", { method }); // Mengirim 'method' ke halaman berikutnya
  };

  return (
    <View style={styles.container}>
      {/* Header dengan tombol kembali */}
      <View style={styles.header}>
        <TouchableOpacity
          onPress={() => navigation.goBack()}
          style={styles.backButton}
        >
          <Ionicons name="arrow-back" size={24} color="#000" />
        </TouchableOpacity>
        <View style={styles.headerTextContainer}>
          <Text style={styles.title}>LUPA KATA SANDI</Text>
        </View>
      </View>

      {/* Pilih Metode Pengiriman */}
      <TouchableOpacity
        style={[styles.button, method === "whatsapp" && styles.selectedButton]}
        onPress={() => handleNavigate("whatsapp")}
      >
        <Text style={styles.buttonText}>NO WHATSAPP</Text>
      </TouchableOpacity>

      <TouchableOpacity
        style={[styles.button, method === "email" && styles.selectedButton]}
        onPress={() => handleNavigate("email")}
      >
        <Text style={styles.buttonText}>EMAIL</Text>
      </TouchableOpacity>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "flex-start",
    alignItems: "center",
    backgroundColor: "#FFF",
  },
  header: {
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "flex-start",
    width: "100%",
    padding: 10,
    backgroundColor: "#FFF",
    borderBottomWidth: 1,
    borderBottomColor: "#e0e0e0",
  },
  backButton: {
    padding: 10,
  },
  headerTextContainer: {
    flex: 1,
    alignItems: "flex-start",
    justifyContent: "center",
  },
  title: {
    fontSize: 20,
    fontWeight: "bold",
    color: "#000",
  },
  button: {
    width: "90%",
    padding: 15,
    marginBottom: 15,
    borderWidth: 1,
    borderRadius: 15,
    alignItems: "center",
    justifyContent: "center",
    borderColor: "#8e8e8e",
  },
  buttonText: {
    fontSize: 16,
    fontWeight: "600",
    color: "#000",
  },
  selectedButton: {
    backgroundColor: "#e0e0e0", // Warna latar belakang ketika dipilih
    borderColor: "#b0b0b0",
  },
});