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

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

  return (
    <TouchableOpacity
      style={[styles.container, isSelected && styles.selected]}
      onPress={onSelect}
      activeOpacity={0.7}
    >
      <Text style={styles.icon}>{type === 'UPI' ? '📱' : type === 'Card' ? '💳' : type === 'Wallet' ? '👛' : '💵'}</Text>
      <Text style={styles.label}>{label}</Text>
      <View style={[styles.radio, isSelected && styles.radioSelected]}>
        {isSelected && <View style={styles.radioInner} />}
      </View>
    </TouchableOpacity>
  );
};