import React from 'react';
import { TouchableOpacityProps } from 'react-native';
import { View, TouchableOpacity } from 'react-native';

export interface RadioButtonProps extends TouchableOpacityProps {
  isSelected: boolean;
  onSelect: () => void;
  disabled?: boolean;
}

export const RadioButton: React.FC<RadioButtonProps> = ({
  isSelected,
  onSelect,
  disabled = false,
  ...restOfProps
}) => {
  return (
    <TouchableOpacity onPress={onSelect} disabled={disabled} {...restOfProps}>
      <View className="flex-row items-center">
        <View
          className={`w-6 h-6 flex justify-center items-center border rounded-full mr-2 ${
            disabled
              ? 'border-neutral-400'
              : isSelected
              ? 'border-brand-500'
              : 'border-neutral-400'
          }`}
        >
          {isSelected && (
            <View
              className={`w-[14px] h-[14px] ${
                disabled ? 'bg-brand-500 opacity-50' : 'bg-brand-500'
              } rounded-full`}
            />
          )}
        </View>
      </View>
    </TouchableOpacity>
  );
};