import React from "react";
import { useState } from "react";
import { BsChevronCompactLeft, BsChevronCompactRight } from "react-icons/bs";
import { RxDotFilled } from "react-icons/rx";
import { EmblaCarousel } from "./carousel";

const Gallery = () => {
  // const slides = [
  //   { url: "/images/1577mobile.webp" },
  //   { url: "/images/bar01.jpg" },
  //   { url: "/images/fbimg02.jpg" },
  //   { url: "/images/food01.jpg" },
  //   { url: "/images/food02.webp" },
  //   { url: "/images/IMG_2737.webp" },
  //   { url: "/images/IMG_2749.webp" },
  //   { url: "/images/IMG_2766.webp" },
  //   { url: "/images/img01.webp" },
  //   { url: "/images/img05.webp" },
  // ];

  // const [currentIndex, setCurrentIndex] = useState(0);

  // const prevSlide = () => {
  //   const isFirstSlide = currentIndex === 0;
  //   const newIndex = isFirstSlide ? slides.length - 1 : currentIndex - 1;
  //   setCurrentIndex(newIndex);
  // };

  // const nextSlide = () => {
  //   const isLastSlide = currentIndex === slides.length - 1;
  //   const newIndex = isLastSlide ? 0 : currentIndex + 1;
  //   setCurrentIndex(newIndex);
  // };

  // const goToSlide = (slideIndex) => {
  //   setCurrentIndex(slideIndex);
  // };

  return (
    <div className="">
      <EmblaCarousel />
      {/* <div
        style={{ backgroundImage: `url(${slides[5].url})` }}
        className="w-full h-full rounded-2xl bg-center bg-cover duration-500"
      ></div>
      <div className="hidden group-hover:block absolute top-50% -translate-x-0 translate-y-[-50%] left-5 text-2xl rounded-full p-2 bg-black/20 text-base-100 cursor-pointer">
        <BsChevronCompactLeft onClick={prevSlide} size={30} />
      </div>
      <div className="hidden group-hover:block absolute top-50% -translate-x-0 translate-y-[-50%] right-5 text-2xl rounded-full p-2 bg-black/20 text-base-100 cursor-pointer">
        <BsChevronCompactRight onClikc={nextSlide} size={30} />
      </div>
      <div className="flex top-4 justify-center py-2">
        {slides.map((slide, slideIndex) => (
          <div
            key={slideIndex}
            onClick={() => goToSlide(slideIndex)}
            className="text-2xl cursor-pointer"
          >
            <RxDotFilled />
          </div>
        ))}
      </div> */}
    </div>
  );
};

export default Gallery;