import { SliderComponent as Slider } from "../../components/SliderComponent.jsx";
import { Spin } from "antd";
import { useWeatherFilter } from "./useWeatherFilter.js";

export const WeatherSlider = ({ disabled, fullRange, isLoading }) => {
  const { value, setValue, range } = useWeatherFilter();

  if (isLoading) {
    return (
      <div className={"flex justify-center items-center"}>
        <Spin />
      </div>
    );
  }

  return (
    <div className="absolute w-[200px] top-[20px] right-[20px] text-xs text-grey z-10 bg-white-background rounded-xl p-3 space-y-3">
      <Slider
        title={"Outdoor air temperature"}
        value={value}
        onAfterChange={setValue}
        min={range[0]}
        max={range[1]}
      />
    </div>
  );
};
