const ProductImageSlider: FC = ({ images }) => {
  const settingsMain = {
    slidesToShow: 1,
    slidesToScroll: 1,
    fade: true,
    variableWidth: true,
  };      
  const settingsThumbs = {
    slidesToShow: 3,
    slidesToScroll: 1,
    infinite: images.length > 3,
    vertical: true,
    dots: false,
  };

  const [nav1, setNav1] = useState<Slider>();
  const [nav2, setNav2] = useState<Slider>();
  const [slider1, setSlider1] = useState<Slider | null>();
  const [slider2, setSlider2] = useState<Slider | null>();

  useEffect(() => {
    setNav1(slider1 as Slider);
    setNav2(slider2 as Slider);
  }, [slider1, slider2]);

  return (
    <div className="sliders-wrapper">
      <div className="thumbnail-slider-wrap">
        <Slider {...settingsThumbs} asNavFor={nav1} ref={slider => setSlider2(slider)}>
          {images.map(slide => (
            <div className="slick-slide" key={`thumb-${slide.id}`}>
              <Image
                className="slick-slide-image"
                src={`${slide.src}`}
              />
            </div>
          ))}
        </Slider>
      </div>
      <div className="main-slider">
        <Slider {...settingsMain} asNavFor={nav2} ref={slider => setSlider1(slider)}>
          {images.map(slide => (
            <div
              className="slick-slide"
              key={`main-${slide.id}`}
              style={{ width: 405}}
            >
              <Image
                className="slick-slide-image"
                src={`${slide.src}`}
              />
            </div>
          ))}
        </Slider>
      </div>
    </div>
  );
};