import { Slider as OldSlider, ConfigProvider } from 'antd';
import React, { useContext } from 'react';
import './index.less';
import classNames from 'classnames';
import { SliderRangeProps, SliderSingleProps } from 'antd/lib/slider';

interface SliderExtraProps {
  className?: string;
  children: React.ReactNode;
}

const Slider: React.FC<
  (SliderRangeProps & SliderExtraProps) | (SliderSingleProps & SliderExtraProps)
> = (props) => {
  const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
  const prefixCls = getPrefixCls('btri-slider');

  return (
    //@ts-ignore
    <OldSlider
      {...props}
      className={classNames(`${prefixCls}-box`, props.className)}
    >
      {props.children}
    </OldSlider>
  );
};

export { Slider };