/**Step 9 */
// Escribe 3 características de los aspectos mencionados a continuación: 
function Traits({traits, onTraitsChange, hasError}) {
    return(
        <Grid container spacing={4}>
            <Grid item xs={12} sm={6}>
                <FormControl fullWidth>
                    <TextField
                        value={traits.qualities}
                        onChange={ev => onTraitsChange({...traits, qualities: ev.target.value})}
                        error={hasError && minLenght(traits.qualities, 10)}
                        helperText={hasError && minLenght(traits.qualities, 10) && "Campo requerido"}
                        label="Cualidades:"
                        margin="normal"
                        required
                    />
                </FormControl>
            </Grid>
            <Grid item xs={12} sm={6}>
                <FormControl fullWidth>
                    <TextField
                        value={traits.weaknesses}
                        onChange={ev => onTraitsChange({...traits, weaknesses: ev.target.value})}
                        error={hasError && minLenght(traits.weaknesses, 10)}
                        helperText={hasError && minLenght(traits.weaknesses, 10) && "Campo requerido"}
                        label="Debilidades:"
                        margin="normal"
                        required
                    />
                </FormControl>
            </Grid>
            <Grid item xs={12} sm={6}>
                <FormControl fullWidth>
                    <TextField
                        value={traits.hobbies}
                        onChange={ev => onTraitsChange({...traits, hobbies: ev.target.value})}
                        error={hasError && minLenght(traits.hobbies, 10)}
                        helperText={hasError && minLenght(traits.hobbies, 10) && "Campo requerido"}
                        label="Pasatiempos:"
                        margin="normal"
                        required
                    />
                </FormControl>
            </Grid>
            <Grid item xs={12} sm={6}>
                <FormControl fullWidth>
                    <TextField
                        value={traits.aspirations}
                        onChange={ev => onTraitsChange({...traits, aspirations: ev.target.value})}
                        error={hasError && minLenght(traits.aspirations, 10)}
                        helperText={hasError && minLenght(traits.aspirations, 10) && "Campo requerido"}
                        label="Aspiraciones:"
                        margin="normal"
                        required
                    />
                </FormControl>
            </Grid>
        </Grid>
    )
}