"use client";
import { Swiper, SwiperSlide } from "swiper/react";
import { Autoplay, Pagination } from "swiper/modules";
import Image from "next/image";
import { BannerModel } from "@/lib/types/models";
import Link from "next/link";
import "swiper/css/pagination";
interface SwiperComponentProps {
  data: BannerModel[];
}
export default function Page({ data }: SwiperComponentProps) {
  return (
    <div className="mobile-container mt-5 lg:mt-0">
      <div className="relative z-1 rounded-2xl lg:rounded-none bg-white overflow-hidden">
        <Swiper
          spaceBetween={0}
          slidesPerView={1}
          centeredSlides={true}
          autoplay={{
            delay: 5000,
            disableOnInteraction: false,
          }}
          pagination={{
            clickable: true,
          }}
          modules={[Autoplay, Pagination]}
          loop={true}
          className="hero-carousel"
        >
          {data.map((item: BannerModel, index: number) => (
            <SwiperSlide key={index}>
              <div className="max-w-[366px] z-50 absolute left-4 lg:left-20 top-1/2 -translate-y-1/2 ">
                {item.title && (
                  <h1 className="font-semibold text-white text-xl sm:text-[40px] mb-1 lg:mb-4">
                    {item.title}
                  </h1>
                )}

                {item.subTitle && (
                  <p className="text-sm lg:text-md text-white/90">
                    {item.subTitle}
                  </p>
                )}

                {item.ctaText && item.link && (
                  <Link
                    href={item.link}
                    className="inline-flex font-medium text-white text-md rounded-full bg-primary py-2 px-4 lg:px-8 ease-out duration-200 hover:bg-blue mt-3 lg:mt-5"
                  >
                    {item.ctaText}
                  </Link>
                )}
              </div>
              <Image
                alt="banner"
                loading="eager"
                quality={50}
                width={1920}
                height={400}
                className="w-[1920px] !h-[192px] lg:!h-[400px] object-cover"
                src={item.image}
              />
              <div className="absolute inset-0 bg-black/15" />
            </SwiperSlide>
          ))}
        </Swiper>
      </div>
    </div>
  );
}