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

interface TaggRadioButtonProps {
  pressed: boolean;
  setPressed: Function;
  onPress: Function;
}
const TaggRadioButton: React.FC<TaggRadioButtonProps> = ({
  pressed,
  setPressed,
  onPress,
}) => {
  const activeOuterStyle = {
    borderColor: pressed ? '#6EE7E7' : '#BEBEBE',
  };

  const activeInnerStyle = {
    backgroundColor: pressed ? '#6EE7E7' : 'white',
  };
  return (
    <TouchableOpacity
      style={[styles.outer, activeOuterStyle]}
      onPress={() => {
        setPressed(!pressed);
        onPress();
      }}>
      {pressed && <View style={[styles.inner, activeInnerStyle]} />}
    </TouchableOpacity>
  );
};

export default TaggRadioButton;
const styles = StyleSheet.create({
  outer: {
    width: 20,
    height: 20,
    borderWidth: 1.5,
    borderRadius: 20,

    backgroundColor: 'white',
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
  },
  inner: {
    width: 14,
    height: 14,
    borderRadius: 8,
  },
});