import React from "react";
import { RangeSlider as KendoRangeSlider } from "@progress/kendo-react-inputs";
import { RangeSliderProps } from "./RangeSliderProps";

const RangeSlider: React.FC<RangeSliderProps> = ({
  dataTestId,
  ariaDescribedBy,
  ariaLabelledBy,
  children,
  className,
  defaultValue,
  dir,
  disabled,
  endTabIndex,
  id,
  max,
  min,
  name,
  required,
  startTabIndex,
  step,
  style,
  valid,
  validationMessage,
  validityStyles,
  value,
  vertical,
  onChange,
}) => {
  return (
    <div data-test-id={dataTestId}>
      <KendoRangeSlider
        ariaDescribedBy={ariaDescribedBy}
        ariaLabelledBy={ariaLabelledBy}
        className={className}
        defaultValue={defaultValue}
        dir={dir}
        disabled={disabled}
        endTabIndex={endTabIndex}
        id={id}
        max={max}
        min={min}
        name={name}
        required={required}
        startTabIndex={startTabIndex}
        step={step}
        style={style}
        valid={valid}
        validationMessage={validationMessage}
        validityStyles={validityStyles}
        value={value}
        vertical={vertical}
        onChange={onChange}
      >
        {children}
      </KendoRangeSlider>
    </div>
  );
};

export default RangeSlider;