import React from "react";
import { TextField } from "@mui/material";
import PropTypes from "prop-types";

/**
 * InputField field with error msg handling
 */
export default function InputField(props) {
  const {
    name,
    label,
    value,
    multiline = false,
    error = null,
    onChange,
  } = props;
  return (
    <TextField
      variant="outlined"
      label={label}
      name={name}
      value={value}
      onChange={onChange}
      multiline={multiline}
      // if error (msg) is in props,
      // set textfield error = true and set helperText
      {...(error && { error: true, helperText: error })}
    />
  );
}

InputField.propTypes = {
  name: PropTypes.string.isRequired,
  label: PropTypes.string.isRequired,
  value: PropTypes.string.isRequired,
  multiline: PropTypes.bool,
  /* error msg */
  error: PropTypes.string,
  /* value change handler */
  onChange: PropTypes.func.isRequired,
};
