import React from 'react';
import { View, Text, TouchableOpacity, Image } from 'react-native';
import { PaymentOptionProps } from './paymentOption.props';
import { getStyles } from './paymentOption.styles';
import { useAppTheme } from '@theme';

export const PaymentOption: React.FC<PaymentOptionProps> = ({
  label,
  isSelected,
  icon,
  onSelect,
}) => {
  const { colors } = useAppTheme();
  const styles = getStyles(colors);
  // console.log(icon);

  return (
    <TouchableOpacity
      style={[styles.container, isSelected && styles.selected]}
      onPress={onSelect}
      activeOpacity={0.7}
    >
      <Image source={{ uri: icon }} style={styles.icon} />
      <Text style={styles.label}>{label}</Text>
      <View style={[styles.radio, isSelected && styles.radioSelected]}>
        {isSelected && <View style={styles.radioInner} />}
      </View>
    </TouchableOpacity>
  );
};