"use client";

import { useEffect, useState } from "react";
import Image from "next/image";
import { BASE_URL } from "@/Constant";

export default function HeroSlider({ sliders }: any) {
  const [activeIndex, setActiveIndex] = useState(0);
  const [isAnimating, setIsAnimating] = useState(true);

  useEffect(() => {
    const interval = setInterval(() => {
      if (isAnimating) {
        setActiveIndex((current) => (current + 1) % (sliders.length / 2));
      }
    }, 3000);

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

  const handlePrev = () => {
    setIsAnimating(false);
    setActiveIndex(
      (current) => (current - 1 + sliders.length / 2) % (sliders.length / 2)
    );
  };

  const handleNext = () => {
    setIsAnimating(false);
    setActiveIndex((current) => (current + 1) % (sliders.length / 2));
  };

  return (
    <div className="relative w-full md:max-w-[53rem] mx-auto px-4 py-12 overflow-hidden before:blur-md ">
      <div className="relative">
        <div
          className="flex transition-transform duration-500 ease-in-out"
          style={{
            transform: `translateX(-${activeIndex * (100 / 4)}%)`,
          }}
        >
          {sliders?.map((slide: any, i: any) => (
            <div
              key={i}
              className=" flex-shrink-0 px-4"
              onMouseEnter={() => setIsAnimating(false)}
              onMouseLeave={() => setIsAnimating(true)}
            >
              <div
                className={`rounded-lg border border-gray-200 md:h-[10rem] md:w-[11rem] h-[10rem] w-[11rem] flex flex-col items-center justify-center transition-all duration-300 ${
                  i % (sliders.length / 2) === activeIndex
                    ? "scale-105 shadow-lg before:absolute before:inset-0 before:rounded-lg before:bg-btn-ob before:blur-md before:-z-10"
                    : ""
                }`}
              >
                {" "}
                <div className="bg-white flex flex-col h-full items-center justify-center w-full">
                  <div className="mb-4 text-[#343434F3]">
                    <Image
                      src={`${BASE_URL}${slide.icon}`}
                      alt={slide.title}
                      width={50}
                      height={50}
                      unoptimized={true}
                    />
                  </div>
                  <h3 className="text-lg font-medium text-gray-900 text-center">
                    {slide.title}
                  </h3>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>

      <button
        onClick={handlePrev}
        className="absolute left-0 top-1/2 -translate-y-1/2 w-10 h-10 flex items-center justify-center bg-white border border-gray-200 rounded-full shadow-lg text-gray-600 hover:bg-gray-50 transition-colors z-10"
      >
        <svg
          className="w-6 h-6"
          fill="none"
          stroke="currentColor"
          viewBox="0 0 24 24"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            strokeLinecap="round"
            strokeLinejoin="round"
            strokeWidth={2}
            d="M15 19l-7-7 7-7"
          />
        </svg>
      </button>

      <button
        onClick={handleNext}
        className="absolute right-0 top-1/2 -translate-y-1/2 w-10 h-10 flex items-center justify-center bg-white border border-gray-200 rounded-full shadow-lg text-gray-600 hover:bg-gray-50 transition-colors z-10"
      >
        <svg
          className="w-6 h-6"
          fill="none"
          stroke="currentColor"
          viewBox="0 0 24 24"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            strokeLinecap="round"
            strokeLinejoin="round"
            strokeWidth={2}
            d="M9 5l7 7-7 7"
          />
        </svg>
      </button>
    </div>
  );
}