import PropTypes from 'prop-types'
import Box from '@mui/material/Box'
import TextField from '@mui/material/TextField'

export default function Email({validMontant, error, clientEmail, setClientEmail}) {
  return (
    <Box sx={{marginBottom: 2}}>
      <TextField
        required
        disabled={Boolean(validMontant)}
        InputLabelProps={{
          shrink: true,
        }}
        variant='outlined'
        label='Adresse e-mail'
        error={error === 'Adresse e-mail invalide.' || error === 'Adresse e-mail obligatoire.'}
        autoComplete='email'
        value={clientEmail}
        name='email-client'
        type='email'
        id='email-client'
        helperText={error === 'Adresse e-mail invalide.' || error === 'Adresse e-mail obligatoire.' ? error : ''}
        onChange={event => setClientEmail(event.target.value)}
      />
    </Box>
  )
}

Email.defaultProps = {
  validMontant: null,
  error: null,
  clientEmail: null
}

Email.propTypes = {
  validMontant: PropTypes.string,
  error: PropTypes.string,
  clientEmail: PropTypes.string,
  setClientEmail: PropTypes.func.isRequired
}