Payment Options

                                        import React, { useState } from 'react';
import { 
  View, 
  StyleSheet, 
  Text, 
  SafeAreaView, 
  ScrollView, 
  TouchableOpacity, 
  StatusBar 
} from 'react-native';
import { Ionicons } from '@expo/vector-icons';

type PaymentOption = {
  id: number;
  name: string;
  logo: string;
};

const PaymentOptions: PaymentOption[] = [
  { id: 1, name: 'Paypal', logo: 'logo-paypal' },
  { id: 2, name: 'Apple Pay', logo: 'logo-apple' },
  { id: 3, name: 'Google Pay', logo: 'logo-google' },
];

export default function PaymentMethods() {
  const [selectedOption, setSelectedOption] = useState<string>('');

  const handleSelection = (option: string) => {
    setSelectedOption(option);
  };

  const renderPaymentOption = (option: PaymentOption, isLast: boolean) => (
    <TouchableOpacity
      key={option.id}
      style={[styles.list, isLast && { borderBottomWidth: 0 }]}
      onPress={() => handleSelection(option.name)}
    >
      <Ionicons name={option.logo} size={25} />
      <Text style={styles.options}>{option.name}</Text>
      <Ionicons
        name={selectedOption === option.name ? 'radio-button-on' : 'radio-button-off'}
        size={25}
        color={selectedOption === option.name ? '#0d6efd' : 'gray'}
      />
    </TouchableOpacity>
  );

  return (
    <SafeAreaView style={styles.container}>
      <StatusBar backgroundColor="white" barStyle="dark-content" />
      <View>
        <Text style={styles.topHeading}>Payment Methods</Text>
      </View>
      <ScrollView showsVerticalScrollIndicator={false}>
        <View style={{ marginTop: 20 }}>
          {/* Credit & Debit Card Section */}
          <View>
            <Text style={styles.heading}>Credit & Debit Card</Text>
            <TouchableOpacity style={styles.card}>
              <Ionicons name="card" size={25} />
              <Text style={styles.options}>Add Card</Text>
              <Ionicons name="chevron-forward" size={25} />
            </TouchableOpacity>
          </View>

          {/* More Payment Options Section */}
          <View style={{ marginTop: 25 }}>
            <Text style={styles.heading}>More Payment Options</Text>
            <View style={styles.paymentOptions}>
              {PaymentOptions.map((option, index) =>
                renderPaymentOption(option, index === PaymentOptions.length - 1)
              )}
            </View>
          </View>
        </View>
      </ScrollView>

      <TouchableOpacity style={styles.confirmButton}>
        <Text style={styles.confirmButtonText}>Confirm Payment</Text>
      </TouchableOpacity>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginHorizontal: 20,
  },
  topHeading: {
    fontWeight: '500',
    fontSize: 18,
    textAlign: 'center',
    marginVertical: 10,
  },
  heading: {
    fontWeight: '500',
    fontSize: 20,
    marginBottom: 10,
  },
  options: {
    fontSize: 16,
    color: 'gray',
    fontWeight: '500',
    flex: 1,
    marginLeft: 10,
  },
  card: {
    padding: 15,
    marginTop: 15,
    borderRadius: 10,
    borderColor: 'gray',
    borderWidth: 1,
    flexDirection: 'row',
    alignItems: 'center',
  },
  paymentOptions: {
    borderRadius: 10,
    borderWidth: 1,
    borderColor: 'gray',
    marginTop: 10,
  },
  list: {
    padding: 15,
    borderBottomWidth: 1,
    borderColor: 'gray',
    flexDirection: 'row',
    alignItems: 'center',
  },
  confirmButton: {
    backgroundColor: 'black',
    padding: 20,
    borderRadius: 50,
    marginVertical: 10,
  },
  confirmButtonText: {
    color: 'white',
    fontWeight: '500',
    fontSize: 18,
    textAlign: 'center',
  },
});