import React from "react";
import { NumericTextBoxProps } from "./NumericTextBoxProps";
import { NumericTextBox as KendoNumericTextBox } from "@progress/kendo-react-inputs";

const NumericTextBox: React.FC<NumericTextBoxProps> = ({
  dataTestId,
  accessKey,
  ariaDescribedBy,
  ariaLabel,
  ariaLabelledBy,
  className,
  defaultValue,
  dir,
  disabled,
  fillMode,
  format,
  id,
  inputStyle,
  inputType,
  label,
  max,
  min,
  name,
  placeholder,
  prefix,
  rangeOnEnter,
  readOnly,
  required,
  rounded,
  size,
  spinners,
  step,
  style,
  suffix,
  tabIndex,
  title,
  valid,
  validationMessage,
  validityStyles,
  value,
  width,
}) => {
  return (
    <div data-test-id={dataTestId}>
      <KendoNumericTextBox
        accessKey={accessKey}
        ariaDescribedBy={ariaDescribedBy}
        ariaLabel={ariaLabel}
        ariaLabelledBy={ariaLabelledBy}
        className={className}
        defaultValue={defaultValue}
        dir={dir}
        disabled={disabled}
        fillMode={fillMode}
        format={format}
        id={id}
        inputStyle={inputStyle}
        inputType={inputType}
        label={label}
        max={max}
        min={min}
        name={name}
        placeholder={placeholder}
        prefix={prefix}
        rangeOnEnter={rangeOnEnter}
        readOnly={readOnly}
        required={required}
        rounded={rounded}
        size={size}
        spinners={spinners}
        step={step}
        style={style}
        suffix={suffix}
        tabIndex={tabIndex}
        title={title}
        valid={valid}
        validationMessage={validationMessage}
        validityStyles={validityStyles}
        value={value}
        width={width}
      />
    </div>
  );
};

export default NumericTextBox;