"use client";
import { FC } from "react";

import { BannerRep } from "@/api/home";
import Box from "@/components/Box";
import { Autoplay, Pagination } from "swiper/modules";
import { Swiper, SwiperSlide } from "swiper/react";
interface Props {
    banners: BannerRep[];
}
const HomeSwiper: FC<Props> = (props) => {
    const { banners = [] } = props;

    return (
        <div style={{ height: "1.86rem" }} className={"home-banner"}>
            <Swiper
                autoplay={{ delay: 2500 }}
                pagination={{ clickable: true }}
                spaceBetween={10}
                scrollbar={{ draggable: true }}
                slidesPerView={1}
                loop
                modules={[Pagination, Autoplay]}
            >
                {banners.map((banner, index) => (
                    <SwiperSlide key={index}>
                        <Box none action={banner.action_type} actionData={banner.action_params}>
                            <img
                                src={banner.content}
                                style={{ height: "1.86rem", width: "100%" }}
                                alt={"banner"}
                            />
                        </Box>
                    </SwiperSlide>
                ))}
            </Swiper>
        </div>
    );
};

export default HomeSwiper;
