import { Image, StyleSheet, Text, View } from 'react-native'
import React from 'react'


interface PaymentOptionProps{
  paymentMethod: string;
  name: string;
  icon: any;
  iconStatus: boolean;
}


const PaymentOption: React.FC<PaymentOptionProps> = ({
  paymentMethod,
  name,
  icon,
  iconStatus,
}) => {


  return (
    <View style={{borderRadius: 5, borderWidth: 1, backgroundColor: paymentMethod == name ? '#FFE6E6' : 'transparent', borderColor: paymentMethod == name ? '#DA7297' : '#A9A9A9'}}>
      {iconStatus ? (
        <View style={{padding: 10, flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between'}}>
          <Text style={{color: '#DA7297', fontWeight: 500, fontSize: 16}}>{name}</Text>
          <Image source={icon} style={{height: 35, width: 200}}/>
        </View>
      ):(
        <View style={{padding: 10, flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between'}}>
          <Text style={{color: '#DA7297', fontWeight: 500, fontSize: 16}}>{name}</Text>
          <Image source={icon} style={{height: 35, width: 60}}/>
        </View>
      )}
    </View>
  )
}

export default PaymentOption

const styles = StyleSheet.create({})