import Image from "next/image";
import { FC, Key, useState } from "react";
import MediaQuery from "react-responsive";
import styles from "./imageSlides.module.scss";

const slideStyles = {
  width: "100%",
  height: "90%",
  borderRadius: "20px",
  backgroundSize: "cover",
  backgroundPosition: "center",
};

const dotsContainerStyles = {
  display: "flex",
  justifyContent: "center",
};

const dotStyle = {
  margin: "5px 3px",
  cursor: "pointer",
};

const ImageSlider: FC<any> = ({ slides }) => {
  const [currentIndex, setCurrentIndex] = useState(0);
  const goToPrevious = () => {
    const isFirstSlide = currentIndex === 0;
    const newIndex = isFirstSlide ? slides.length - 1 : currentIndex - 1;
    setCurrentIndex(newIndex);
  };
  const goToNext = () => {
    const isLastSlide = currentIndex === slides.length - 1;
    const newIndex = isLastSlide ? 0 : currentIndex + 1;
    setCurrentIndex(newIndex);
  };
  const goToSlide = (slideIndex: number) => {
    setCurrentIndex(slideIndex);
  };

  const slideStylesWidthBackground = {
    ...slideStyles,
    backgroundImage: `url(${slides[currentIndex].url}) `,
  };

  return (
    <div className={styles.sliderStyles}>
      <MediaQuery minWidth={769}>
        <div style={slideStylesWidthBackground}>
          {/* <Image src={`${slides[currentIndex].url}`}layout={"fill"} /> */}
        </div>
        <div style={dotsContainerStyles}>
          {slides.map((slide: any, slideIndex: number) => (
            <div
              style={dotStyle}
              key={slideIndex}
              onClick={() => goToSlide(slideIndex)}
            >
              {currentIndex == slideIndex ? (
                <>
                  <img src={"/images/Rectangle3037.png"} />
                </>
              ) : (
                <>
                  <img src={"/images/Ellipse437.png"} />
                </>
              )}
            </div>
          ))}
        </div>
      </MediaQuery>
      <MediaQuery maxWidth={768}>
        <div style={slideStylesWidthBackground}>
          {/* <Image src={`${slides[currentIndex].url}`} layout={"fill"} /> */}
        </div>
        <div style={dotsContainerStyles}>
          {slides.map((slide: any, slideIndex: number) => (
            <div
              style={dotStyle}
              key={slideIndex}
              onClick={() => goToSlide(slideIndex)}
            >
              {currentIndex == slideIndex ? (
                <>
                  <img src={"/images/Rectangle3037.png"} />
                </>
              ) : (
                <>
                  <img src={"/images/Ellipse437.png"} />
                </>
              )}
            </div>
          ))}
        </div>
      </MediaQuery>
    </div>
  );
};

export default ImageSlider;