import React from "react";
import Link from "next/link";
import Image from "next/image";
import { Swiper, SwiperSlide } from "swiper/react";
import { Pagination, Autoplay } from "swiper/modules";
import { Container } from "react-bootstrap";

const PageBanner = ({ banners = [] }) => {
  return (
    <Swiper
      spaceBetween={30}
      pagination={{
        clickable: true,
      }}
      breakpoints={{
        0: {
          slidesPerView: 1,
        },
        768: {
          slidesPerView: 1,
        },
        1200: {
          slidesPerView: 1,
        },
      }}
      autoplay={{
        delay: 5000,
        disableOnInteraction: true,
        pauseOnMouseEnter: true,
      }}
      modules={[Autoplay]}
      className="page-banner-swiper"
    >
      {banners.map((banner, index) => (
        <SwiperSlide key={index}>
          <div className="page-title-area">
            <div className="image-wrapper">
              <Image
                src={banner.imageSrc}
                alt={banner.pageTitle}
                fill
                style={{ objectFit: "fill" }} // Replace objectFit prop
                priority
                className="img-fluid postion-absolute"
              />
            </div>
            <Container>
              <div className="page-title-content">
                <h2>{banner.pageTitle}</h2>
                <ul>
                  <li>
                    <Link href={banner.homePageUrl}>{banner.homePageText}</Link>
                  </li>
                  <li>{banner.activePageText}</li>
                </ul>
              </div>
            </Container>
          </div>
        </SwiperSlide>
      ))}
    </Swiper>
  );
};

export default PageBanner;