import PropTypes from "prop-types";

function FormInput({
  value,
  onChange,
  maxLength=17,
  readOnly = false,
  className = "",
  type = "text",
}) {
  return (
    <input
      readOnly={readOnly}
      value={value}
      className={`w-1/4 h-10 px-2 rounded-full dark:bg-white dark:text-grey border-2 text-grey focus:outline-grey ${className}`}
      onChange={onChange}
      type={type}
      maxLength={maxLength}
    />
  );
}

FormInput.propTypes = {
  value: PropTypes.string.isRequired,
  onChange: PropTypes.func.isRequired,
  readOnly: PropTypes.bool,
  className: PropTypes.string,
  type: PropTypes.string,
  maxLength: PropTypes.number,
};

export default FormInput;