//**Step 2 */
//**Ocupación del Solicitante  */
function Occupation({occupation, onOccupationChange, hasError, requiredOccuptionStep}) {
    return(
        <Grid container spacing={4}>
            <Grid item xs={12} sm={6}>
                <FormControl fullWidth>
                    <TextField
                        margin="normal"
                        label="Institución donde labora:"
                        error={hasError && requiredOccuptionStep && isRequired(occupation.company)}
                        helperText={hasError && requiredOccuptionStep && isRequired(occupation.company) && "Campo requerido"}
                        value={occupation.company}
                        onChange={ev => onOccupationChange({...occupation, company: ev.target.value})}
                        required
                    />
                </FormControl>
            </Grid>
            <Grid item xs={12} sm={6}>
                <FormControl fullWidth>
                    <TextField
                        value={occupation.company_address}
                        onChange={ev => onOccupationChange({...occupation, company_address: ev.target.value})}
                        label="Direccion de la Empresa:"
                        margin="normal"
                    />
                </FormControl>
            </Grid>
            <Grid item xs={12} sm={6}>
                <FormControl fullWidth>
                    <TextField
                        value={occupation.company_telephone}
                        onChange={ev => onOccupationChange({...occupation, company_telephone: ev.target.value})}
                        label="Tel de oficina:"
                        margin="normal"
                        type="number"
                    />
                </FormControl>
            </Grid>
            <Grid item xs={12} sm={6}>
                <FormControl fullWidth>
                    <TextField
                        value={occupation.job_position}
                        onChange={ev => onOccupationChange({...occupation, job_position: ev.target.value})}
                        error={hasError && requiredOccuptionStep && isRequired(occupation.job_position)}
                        helperText={hasError && requiredOccuptionStep && isRequired(occupation.job_position) && "Campo requerido"}
                        label="Ocupacion:"
                        margin="normal"
                        required
                    />
                </FormControl>
            </Grid>
            <Grid item xs={12} sm={6}>
                <FormControl fullWidth>
                    <TextField
                        value={occupation.job_antiquity}
                        onChange={ev => onOccupationChange({...occupation, job_antiquity: ev.target.value})}
                        label="Antigüedad:"
                        margin="normal"
                        type="number"
                    />
                </FormControl>
            </Grid>
            <Grid item xs={12} sm={6}>
                <FormControl fullWidth>
                    <TextField
                        value={occupation.monthly_income}
                        onChange={ev => onOccupationChange({...occupation, monthly_income: Number(ev.target.value)})}
                        error={hasError && requiredOccuptionStep && minLenght(occupation.monthly_income, 3)}
                        helperText={hasError && requiredOccuptionStep && minLenght(occupation.monthly_income, 3) && "Campo requerido"}
                        label="Ingreso Mensual:"
                        margin="normal"
                        type="number"
                        required
                    />
                </FormControl>
            </Grid>
            <Grid item xs={12} sm={6}>
                <FormControl fullWidth>
                    <TextField
                        value={occupation.monthly_spend}
                        onChange={ev => onOccupationChange({...occupation, monthly_spend: Number(ev.target.value)})}
                        error={hasError && requiredOccuptionStep && minLenght(occupation.monthly_spend, 3)}
                        helperText={hasError && requiredOccuptionStep && minLenght(occupation.monthly_spend, 3) && "Campo requerido"}
                        label="Gasto Mensual:"
                        margin="normal"
                        type="number"
                    />
                </FormControl>
            </Grid>
            <Grid item xs={12} sm={6}>
                <FormControl fullWidth>
                    <TextField
                        value={occupation.degree}
                        onChange={ev => onOccupationChange({...occupation, degree: ev.target.value})}
                        error={hasError && requiredOccuptionStep && isRequired(occupation.degree)}
                        helperText={hasError && requiredOccuptionStep && isRequired(occupation.degree) && "Campo requerido"}
                        label="Grado de Estudios:"
                        margin="normal"
                        required
                    />
                </FormControl>
            </Grid>
        </Grid>
    )
}