content: import React from 'react';
  import { View, TouchableOpacity } from 'react-native';
  import PropTypes from 'prop-types';
  
  import { TextInfo } from '../../../Atoms/Text';
  import Child from './Child';
  
  import styles from './styles';
  import theme from '../../../../theme';
  
  const { color } = theme;
  
  const ChangeChild = ({ user, family, selectedYoung }) => (
    <View style={styles.container}>
      <View style={styles.info}>
        <TextInfo
          value={`Haz seleccionado a ${family.youngSelected.name}, si deseas seleccionar otro menor elijelo de la lista`}
          col={color.text}
        />
      </View>
      <View style={styles.childList}>
        {family.members.map((member) => {
          if (user.uid !== member.uid) {
            return (
              <TouchableOpacity
                key={member.uid}
                onPress={() => selectedYoung(member)}
              >
                <View>
                  <View style={styles.separator} />
                  <Child
                    text={member.name}
                    points={member.points.toLocaleString()}
                    avatar={member.avatar}
                    selected={member.uid === family.youngSelected.uid}
                  />
                </View>
              </TouchableOpacity>
            );
          }
          return null;
        })}
      </View>
    </View>
  );
  
  ChangeChild.propTypes = {
    user: PropTypes.shape({}).isRequired,
    family: PropTypes.shape({
      members: PropTypes.arrayOf(PropTypes.shape({})),
      youngSelected: PropTypes.shape({
        name: PropTypes.string.isRequired,
      }),
    }).isRequired,
    selectedYoung: PropTypes.func.isRequired,
  };
  
  export default ChangeChild;
  