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

function DateInput({ field, disabled, onChange, error, helperText }) {
  return (
    <TextField
      fullWidth
      type="date"
      label={field.Label}
      value={field.ProValue || ""}
      placeholder={field.Placeholder}
      disabled={disabled}
      error={error}
      helperText={helperText}
      InputLabelProps={{ shrink: true }}
      onChange={(e) => onChange(e.target.value)}
      id={`field-${field.Id}`}
    />
  );
}

export default DateInput;

DateInput.propTypes = {
  field: PropTypes.shape({
    Id: PropTypes.string.isRequired,
    Label: PropTypes.string.isRequired,
    ProValue: PropTypes.string,
    Placeholder: PropTypes.string,
  }).isRequired,
  disabled: PropTypes.bool,
  onChange: PropTypes.func.isRequired,
  error: PropTypes.bool,
  helperText: PropTypes.string,
};
