"use client";

import Image from "next/image";
import { Swiper, SwiperSlide } from "swiper/react";
import { Autoplay } from "swiper/modules";
import BlueShining from "../../../../public/images/blue-shining.svg";
import { HomepageBannerEnquiryProps } from "@/types/homepage";
import "swiper/css";

interface BannerBelowSwiperProps {
    bannerEnquiry?: HomepageBannerEnquiryProps[];
    className?: string;
}

export default function BannerBelowSwiper({ bannerEnquiry = [], className = "" }: BannerBelowSwiperProps) {
    if (!bannerEnquiry || bannerEnquiry.length === 0) {
        return null;
    }
    return (
        <section className={` bg-[#6DEBF1] py-4 md:py-7 ${className}`}>
            <div className="container">
                {/* Desktop */}
                <div className="hidden lg:flex items-center justify-between gap-3 md:gap-4 xl:gap-6 2xl:gap-8 overflow-x-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
                    {bannerEnquiry.map((item, index) => (
                        <div key={index} className="flex items-center gap-3 lg:gap-4 xl:gap-6 2xl:gap-8 shrink-0">
                            <span className="text-[14px] lg:text-[15px] xl:text-[18px] 2xl:text-[20px] font-medium text-[#1718FF] whitespace-nowrap shrink-0">
                                {item.enquery}
                            </span>

                            {index !== bannerEnquiry.length - 1 && (
                                <Image
                                    src={item.icon || BlueShining}
                                    alt="blue shining star"
                                    width={16}
                                    height={16}
                                    aria-hidden="true"
                                    className="shrink-0 w-3.5 h-3.5 xl:w-4 xl:h-4"
                                />
                            )}
                        </div>
                    ))}
                </div>

                {/* Mobile & Tablet */}
                <div className="lg:hidden">
                    <Swiper
                        modules={[Autoplay]}
                        slidesPerView="auto"
                        spaceBetween={24}
                        loop
                        speed={5000}
                        allowTouchMove={false}
                        autoplay={{
                            delay: 0,
                            disableOnInteraction: false,
                        }}
                        className="myBannerSwiper"
                    >
                        {bannerEnquiry.map((item, index) => (
                            <SwiperSlide
                                key={index}
                                className="!w-auto"
                            >
                                <div className="flex items-center justify-center gap-4 sm:gap-6 shrink-0">
                                    <span className="whitespace-nowrap text-[15px] sm:text-[16px] font-medium text-[#1718FF] inline-block shrink-0">
                                        {item.enquery}
                                    </span>

                                    <Image
                                        src={item.icon || BlueShining}
                                        alt="blue shining star"
                                        width={16}
                                        height={16}
                                        aria-hidden="true"
                                        className="shrink-0"
                                    />
                                </div>
                            </SwiperSlide>
                        ))}
                    </Swiper>
                </div>
            </div>
        </section>
    );
}