"use client";
import Image from "next/image";
import "swiper/css";
import "swiper/css/navigation";
import "swiper/css/pagination";
import { Autoplay, Navigation, Pagination } from "swiper/modules";
import { Swiper, SwiperSlide } from "swiper/react";
import defaultimg from "@/public/defaultimg.png";

const HeroSwiper = ({ images }: { images: any }) => {
  return (
    <div className="relative w-full  h-[620px] sm:h-[350px] lg:h-[598px] xl:h-[598px]">
      {images?.[0] && (
        <div className="relative w-full h-[620px] sm:h-[350px] lg:h-[598px] xl:h-[598px]">
          <Image
            src={images[0].image ?? defaultimg}
            alt="img"
            fill
            className="w-full h-full object-cover"
            priority
            fetchPriority="high"
            loading="eager"
            sizes="(max-width: 640px) 100vw,
             (max-width: 1024px) 100vw,
             1200px"
            quality={70}
          />
        </div>
      )}

      <Swiper
        spaceBetween={10}
        centeredSlides={true}
        autoplay={{
          delay: 3000,
          disableOnInteraction: true,
        }}
        loop={true}
        speed={1000}
        modules={[Autoplay, Pagination, Navigation]}
        className="mySwiper !h-[620px] sm:!h-[350px] lg:!h-[598px] xl:!h-[598px]"
      >
        {images?.slice(1).map((item: any, index: any) => (
          <SwiperSlide key={index}>
            <Image
              className="w-full h-full object-cover"
              src={item?.image ?? defaultimg}
              alt="img"
              fill
              sizes="(max-width: 640px) 100vw,
               (max-width: 1024px) 100vw,
               1200px"
              quality={70}
              loading="lazy"
            />
          </SwiperSlide>
        ))}
      </Swiper>

      <div className="absolute top-0 left-0 w-full h-full z-50 pointer-events-none bg-[#00000050] backdrop-blur-sm"></div>
    </div>
  );
};

export default HeroSwiper;