"use client";

import Image from "next/image";
import { useKeenSlider } from "keen-slider/react";
import { useState } from "react";

interface BannerProps {
  data: any;
}

export default function Banner({ data }: BannerProps) {
  const [current, setCurrent] = useState(0);

  const [sliderRef] = useKeenSlider<HTMLDivElement>({
    loop: true,
    slides: {
      perView: 1,
    },
    slideChanged(slider) {
      setCurrent(slider.track.details.rel);
    },
  });

  return (
    <div className="w-full mx-auto z-11 bg-[#FFF8EE]">
      <div
        ref={sliderRef}
        className="
          keen-slider 
          w-full 
          overflow-hidden 
          
          rounded-b-[100px]  
          rounded-t-4xl 
          relative
          flex
        "
      >
        {data &&
          data?.map((item: any, index: any) => (
            <div
              key={index}
              className="
              keen-slider__slide 
              relative 
              w-full 
              h-[450px] 
              md:h-[500px]
              
            "
            >
              <Image
                src={item?.image_link}
                alt={item.text ?? "Banner"}
                fill
                priority={index === 0}
                className="object-cover"
              />

              <div className="absolute bottom-0 left-0 right-0 h-32 bg-gradient-to-t from-black/40 to-transparent pointer-events-none"></div>
            </div>
          ))}
      </div>

      {/* Dot Pagination */}
      <div className="flex justify-center mt-4 gap-2">
        {data &&
          data?.map((_: any, idx: any) => (
            <button
              key={idx}
              className={`w-3 h-3 rounded-full transition-all ${
                current === idx ? "bg-orange-600 w-5" : "bg-gray-300"
              }`}
              onClick={() => setCurrent(idx)}
            />
          ))}
      </div>
    </div>
  );
}