"use client";
import { useTranslations } from "next-intl";
import { FC } from "react";
import { Autoplay } from "swiper/modules";
import { Swiper, SwiperSlide } from "swiper/react";
interface Props {}

const mockData = [
    { url: "/9f/551935.jpg", name: "123", money: 11 },
    { url: "/9f/551935.jpg", name: "123", money: 11 },
    { url: "/9f/551935.jpg", name: "123", money: 11 },
    { url: "/9f/551935.jpg", name: "123", money: 11 },
    { url: "/9f/551935.jpg", name: "123", money: 11 },
    { url: "/9f/551935.jpg", name: "123", money: 11 },
    { url: "/9f/551935.jpg", name: "123", money: 11 },
];
const HomePrize: FC<Props> = (props) => {
    const t = useTranslations("HomePage");

    return (
        <div className={"my-[0.0694rem]"}>
            <div className={"mb-[0.0347rem]"}>{t("prize")}</div>
            <Swiper
                slidesPerView={3.2}
                spaceBetween={30}
                pagination={{
                    clickable: true,
                }}
                loop
                autoplay={{
                    delay: 2000,
                }}
                modules={[Autoplay]}
                className="mySwiper"
            >
                {mockData.map((prize, index) => (
                    <SwiperSlide key={index}>
                        <div className={"w-[1.1rem] bg-[#1c1e22]"}>
                            <img className={"h-[1.54rem]"} src={prize.url} alt="" />
                            <div className={"px-[0.13rem] pb-[0.0347rem] text-[0.13rem]"}>
                                <p className={"text-[#98a7b5]"}>{prize.name}</p>
                                <p className={"text-[#43c937]"}>R${prize.money}</p>
                            </div>
                        </div>
                    </SwiperSlide>
                ))}
            </Swiper>
        </div>
    );
};

export default HomePrize;
