// src/components/ImageComparison/ImageComparison.tsx
import * as Slider from "react-compare-slider/components";
import { useReactCompareSlider } from "react-compare-slider/hooks";
// import UserImage1 from "../../assets/images/sadie-sink-1.jpg";
// import UserImage2 from "../../assets/images/sadie-sink-2.jpeg";

export const ImageComparison = () => {
  const sliderProps = useReactCompareSlider({ portrait: false });

  return (
    <Slider.Provider {...sliderProps}>
      <Slider.Root>
        <Slider.Item item="itemOne">
          <Slider.Image
            src={
              "https://res.cloudinary.com/dyswu0gin/image/upload/v1784518411/sadie-sink-elle-3840x2160-24726_xgyh9z.jpg"
            }
            alt="Image one"
          />
        </Slider.Item>
        <Slider.Item item="itemTwo">
          <Slider.Image
            src={
              "https://res.cloudinary.com/dyswu0gin/image/upload/v1784518410/thumb-1920-1331868_rmej2i.jpg"
            }
            alt="Image two"
          />
        </Slider.Item>
        <Slider.HandleRoot>
          <Slider.Handle />
        </Slider.HandleRoot>
      </Slider.Root>
    </Slider.Provider>
  );
};