import React from 'react';
import PropTypes from 'prop-types';
import { TextField } from '@material-ui/core';

export default function InputField({
  required,
  input,
  label,
  meta: { touched, error },
  type,
}) {
  return (
    <React.Fragment>
      <TextField
        label={label}
        required={required}
        {...input}
        type={type}
        style={{ marginBottom: '1rem' }}
      />
      {touched && error && <span className="error">{error}</span>}
    </React.Fragment>
  );
}

InputField.propTypes = {
  required: PropTypes.bool.isRequired,
  input: PropTypes.any.isRequired,
  label: PropTypes.string.isRequired,
  meta: PropTypes.shape({
    touched: PropTypes.bool,
    error: PropTypes.string,
  }).isRequired,
  type: PropTypes.string.isRequired,
};