"use client";
import { BannerRep } from "@/api/home";
import Box from "@/components/Box";
import { FC, PropsWithChildren } from "react";
import { Swiper, SwiperSlide } from "swiper/react";

interface Props {
    banners: BannerRep[];
}

const HomeCard: FC<PropsWithChildren<Props>> = (props) => {
    const { banners = [] } = props;
    return (
        <Swiper slidesPerView={3} spaceBetween={10}>
            {banners?.map((banner, index) => (
                <SwiperSlide key={index} className={"my-[0.08rem]"}>
                    <Box
                        className={"h-[1.0903rem] max-w-[1.2153rem]"}
                        none
                        action={banner.action_type}
                        actionData={banner.action_params}
                    >
                        <img
                            src={banner.content!}
                            alt=""
                            className={"h-[100%] w-[100%] rounded-[0.04rem]"}
                        />
                    </Box>
                </SwiperSlide>
            ))}
        </Swiper>
    );
};

export default HomeCard;
