"use client";

import { Swiper, SwiperSlide } from "swiper/react";
import { Autoplay, Navigation, Pagination } from "swiper/modules";

import "swiper/css";
import "swiper/css/navigation";
import "swiper/css/pagination";

import banner1 from "../../public/assets/banners/hero-banner/Hero Banner-04.webp";
import banner2 from "../../public/assets/banners/hero-banner/Hero Banner-02.webp";
import banner3 from "../../public/assets/banners/hero-banner/Hero Banner-09.webp";
import banner4 from "../../public/assets/banners/hero-banner/Hero Banner-11.webp";
import banner6 from "../../public/assets/banners/hero-banner/Hero Banner-07.webp";
import banner7 from "../../public/assets/banners/hero-banner/Hero Banner-01.webp";
import banner8 from "../../public/assets/banners/hero-banner/Hero Banner-03.webp";
import Image from "next/image";

const publicPath = process.env.NEXT_PUBLIC_BASE_PATH ? `/${process.env.NEXT_PUBLIC_BASE_PATH}`.replace(/\/\/+/, "/") : "";
const video2 = `${publicPath}/assets/banners/banner-video/sqHeroBanner.mp4`;
const video5 = `${publicPath}/assets/banners/banner-video/sq-agricultural.mp4`;

const slides = [
     {
    title: "Hassle Free Solution",
    image: banner2,
  },
  {
    title: "Hassle Free Solution",
    image: banner1,
  },
  {
    title: "Sustainable Developments",
    image: banner3,
  },

  {
    title: "Agriculture",
    image: banner4,
  }, 
  {
    title: "TS Transformer",
    image: banner7,
  },
  {
    title: "Super Enamelled",
    image: banner8,
  },
  {
    title: "Innovative Technology",
    image: banner6,
  },
   {
    title: "SQ Cables",
    video: video2,
    poster:banner6
  },
  {
    title: "Smart Agriculture",
    video: video5,
    poster:banner7
  },
];

export default function HeroSlider() {
  return (
   <div className="mx-4 lg:mt-5 mt-32">
    <div className=" gap-3 w-full rounded-2xl">
      <div className="w-full lg:h-[65vh] md:h-[45vh] h-[30vh] col-span-4">
      <Swiper
        modules={[Autoplay, Navigation, Pagination]}
        spaceBetween={0}
        slidesPerView={1}
        loop={true}
        className="vertical-pagination"
        autoplay={{
          delay: 3000,
          disableOnInteraction: false,
        }}

        navigation={true}
        pagination={{
          clickable: true,
        }}
      >
        {slides.map((slide, i) => (
          <SwiperSlide key={i} className=" rounded-2xl"> 
           <div className="lg:h-[65vh] md:h-[45vh] h-[30vh] w-full">
            {slide.video ? (
              <video
                autoPlay
                muted
                loop
                playsInline
                preload="none"
                poster={slide.poster.src}
                className="w-full h-full object-cover rounded-2xl"
              >
                <source src={slide.video} type="video/mp4" />
              </video>
                ) : (
                 <Image
                    alt=""
                    fill
                    src={slide.image!.src}
                    className="w-full h-full object-fill  bg-center rounded-2xl"
                    
                  />
                )}
          </div>
          </SwiperSlide>
        ))}
      </Swiper>
      </div>
    </div>
   </div>
  );
}