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

function NumberInput({ field, disabled, onChange, error, helperText }) {
  return (
    <TextField
      fullWidth
      type="number"
      label={field.Label}
      value={field.ProValue || ""}
      placeholder={field.Placeholder}
      disabled={disabled}
      inputProps={{
        min: field.Min,
        max: field.Max,
      }}
      error={error}
      helperText={helperText}
      onChange={(e) => onChange(e.target.value)}
      id={`field-${field.Id}`}
    />
  );
}

export default NumberInput;

NumberInput.propTypes = {
  field: PropTypes.shape({
    Id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
    Label: PropTypes.string.isRequired,
    ProValue: PropTypes.string,
    Min: PropTypes.number,
    Max: PropTypes.number,
    Placeholder: PropTypes.string,
  }).isRequired,
  disabled: PropTypes.bool,
  onChange: PropTypes.func.isRequired,
  error: PropTypes.bool,
  helperText: PropTypes.string,
};
