//**Step 3 */
//** Datos del Conyuge */
function Spuse({spuse, onSpuseChange, hasError, requiredSpuseStep}) {
    return(
        <Grid container spacing={4}>
            <Grid item xs={12} sm={6}>
                <FormControl fullWidth>
                    <TextField
                        value={spuse.father_surname}
                        onChange={ ev => onSpuseChange({...spuse, father_surname: ev.target.value }) }
                        label="Apellido Paterno"
                        margin="normal"
                    />
                </FormControl>
            </Grid>
            <Grid item xs={12} sm={6}>
                <FormControl fullWidth>
                    <TextField
                        value={spuse.mother_surname}
                        onChange={ ev => onSpuseChange({...spuse, mother_surname: ev.target.value }) }
                        label="Apellido Materno"
                        margin="normal"
                    />
                </FormControl>
            </Grid>
            <Grid item xs={12} sm={6}>
                <FormControl fullWidth>
                    <TextField
                        value={spuse.name}
                        onChange={ ev => onSpuseChange({...spuse, name: ev.target.value }) }
                        label="Nombre (s)"
                        required
                        error={hasError && requiredSpuseStep && minLenght(spuse.name, 5)}
                        helperText={hasError && requiredSpuseStep && minLenght(spuse.name, 5) && "Campo requerido"}
                        margin="normal"
                    />
                </FormControl>
            </Grid>
            <Grid item xs={12} sm={6}>
                <FormControl fullWidth>
                    <TextField
                        value={spuse.nationality}
                        onChange={ ev => onSpuseChange({...spuse, nationality: ev.target.value }) }
                        label="Nacionalidad:"
                        margin="normal"
                    />
                </FormControl>
            </Grid>
            <Grid item xs={12} sm={6}>
                <FormControl fullWidth>
                    <TextField
                        value={spuse.birthday_date}
                        onChange={ ev => onSpuseChange({...spuse, birthday_date: ev.target.value }) }
                        label="Fecha de nacimiento:"
                        margin="normal"
                    />
                </FormControl>
            </Grid>
            <Grid item xs={12} sm={6}>
                <FormControl fullWidth>
                    <TextField
                        value={spuse.cellphone}
                        onChange={ ev => onSpuseChange({...spuse, cellphone: ev.target.value }) }
                        label="Teléfono:"
                        margin="normal"
                    />
                </FormControl>
            </Grid>
            <Grid item xs={12} sm={6}>
                <FormControl fullWidth>
                    <TextField
                        value={spuse.profession}
                        onChange={ ev => onSpuseChange({...spuse, profession: ev.target.value }) }
                        label="Ocupación:"
                        margin="normal"
                    />
                </FormControl>
            </Grid>
            <Grid item xs={12} sm={6}>
                <FormControl fullWidth>
                    <TextField
                        value={spuse.works_name}
                        onChange={ ev => onSpuseChange({...spuse, works_name: ev.target.value }) }
                        label="Institución donde labora:"
                        margin="normal"
                    />
                </FormControl>
            </Grid>
            <Grid item xs={12} sm={6}>
                <FormControl fullWidth>
                    <TextField
                        value={spuse.job_antiquity}
                        onChange={ ev => onSpuseChange({...spuse, job_antiquity: ev.target.value }) }
                        label="Antigüedad:"
                        margin="normal"
                        type="number"
                    />
                </FormControl>
            </Grid>
            <Grid item xs={12} sm={6}>
                <FormControl fullWidth>
                    <TextField
                        value={spuse.monthly_income}
                        onChange={ ev => onSpuseChange({...spuse, monthly_income: Number(ev.target.value) }) }
                        label="Ingreso Mensual min(100):"
                        margin="normal"
                        type="number"
                    />
                </FormControl>
            </Grid>
            <Grid item xs={12} sm={6}>
                <FormControl fullWidth>
                    <TextField
                        value={spuse.monthly_spend}
                        onChange={ ev => onSpuseChange({...spuse, monthly_spend: Number(ev.target.value) }) }
                        label="Gasto Mensual min(100):"
                        margin="normal"
                        type="number"
                    />
                </FormControl>
            </Grid>
            <Grid item xs={12} sm={6}>
                <FormControl fullWidth>
                    <TextField
                        value={spuse.degree}
                        onChange={ ev => onSpuseChange({...spuse, degree: ev.target.value }) }
                        label="Grado de Estudios:"
                        margin="normal"
                    />
                </FormControl>
            </Grid>
        </Grid>
    )
}