import { useState, useEffect } from "react";
import Image from "next/image";
import ban1 from "@img/ban1.jpg";
import ban2 from "@img/ban2.jpg";
import ban3 from "@img/ban3.jpg";
import ban4 from "@img/ban4.jpg";
import ban1res from "@img/ban1res.jpg";
import ban2res from "@img/ban2res.jpg";
import ban3res from "@img/ban3res.jpg";
import ban4res from "@img/ban4res.jpg";
import Link from "next/link";

const slides = [
  {
    id: 1,
    image: ban1,
    imageResponsive: ban1res,
    title: "محصولات هیدرودرم",
    description: "Slide 1 Description",
    url: "/categories/0/%D9%87%D9%85%D9%87%20%D9%85%D8%AD%D8%B5%D9%88%D9%84%D8%A7%D8%AA?page=0&brandIds=677cfbc5-2aa0-42f2-90ec-69073058e76e",
  },
  {
    id: 2,
    image: ban2,
    imageResponsive: ban2res,
    title: "محصولات فولیکا",
    description: "Slide 2 Description",
    url: "/categories/0/%D9%87%D9%85%D9%87%20%D9%85%D8%AD%D8%B5%D9%88%D9%84%D8%A7%D8%AA?brandIds=30be42fe-633b-4c43-886b-c946a68dddcc&page=0",
  },
  {
    id: 3,
    image: ban3,
    imageResponsive: ban3res,
    title: "محصولات بیول",
    description: "Slide 3 Description",
    url: "/categories/0/%D9%87%D9%85%D9%87%20%D9%85%D8%AD%D8%B5%D9%88%D9%84%D8%A7%D8%AA?page=0&brandIds=93a2a376-5a18-49f3-b29c-a3c8ef2ff133",
  },
  {
    id: 4,
    image: ban4,
    imageResponsive: ban4res,
    title: "ارسال رایگان",
    description: "Slide 4 Description",
    url: "/categories/0/%D9%87%D9%85%D9%87%20%D9%85%D8%AD%D8%B5%D9%88%D9%84%D8%A7%D8%AA?page=0&brandIds=93a2a376-5a18-49f3-b29c-a3c8ef2ff133",
  },
];

const HeroSection = () => {
  const [currentIndex, setCurrentIndex] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setCurrentIndex((prevIndex) => (prevIndex + 1) % slides.length);
    }, 8000); // 8 seconds interval

    return () => clearInterval(interval);
  }, []);

  const goToSlide = (index) => {
    setCurrentIndex(index);
  };

  return (
    <>
      <div className="relative w-full xs:h-[200px]  md:h-[400px] lg:h-[400px] xl:h-[650px] overflow-hidden lg:mt-[-18px] xs:mt-5 xs:rounded-2xl lg:rounded-none ">
        <div
          className="absolute flex transition-transform duration-500"
          style={{ transform: `translateX(-${currentIndex * 100}%)` }}
        >
          {slides.map((slide) => (
            <Link
              href={slide.url}
              key={slide.id}
              className="flex-shrink-0 w-full"
            >
              <div className="block lg:hidden xs:mx-2 lg:mx-0">
                <Image
                  src={slide?.imageResponsive}
                  alt={slide?.title}
                  className="!w-full xs:h-[200px]  md:h-[400px] lg:h-[400px] xl:h-[650px]  rounded-2xl lg:rounded-none object-cover"
                  layout="responsive"
                  width={800}
                  height={600}
                />
              </div>
              <div className="hidden lg:block">
                <Image
                  src={slide?.image}
                  alt={slide?.title}
                  className="!w-full xs:h-[200px]  md:h-[400px] lg:h-[400px] xl:h-[650px]   rounded-2xl lg:rounded-none object-cover "
                  layout="responsive"
                  width={800}
                  height={600}
                />
              </div>
            </Link>
          ))}
        </div>

        <div className="absolute xs:bottom-3 md:bottom-10 lg:bottom-4 xl:bottom-[70px] 2xl:bottom-[70px]  left-1/2 transform -translate-x-1/2 flex space-x-2">
          {slides.map((e, index) => (
            <button
              key={index}
              onClick={() => goToSlide(index)}
              className={`rounded-full xs:text-[11px] md:text-sm ${
                index === currentIndex
                  ? "bg-white w-fit xs:h-4 md:h-6 px-2 "
                  : "bg-gray-100 opacity-40 xs:w-4 md:w-6 xs:h-4 md:h-6"
              }`}
            >
              {index === currentIndex && e.title}
            </button>
          ))}
        </div>
      </div>
    </>
  );
};

export default HeroSection;