"use client";
import { CashbackTypes, Rule } from "@/api/cashback";
import Box from "@/components/Box";
import Table, { TableHeaderItem } from "@/components/Table";
import { useTranslations } from "next-intl";
import { JSX } from "react";

interface Props {
    cashbackInfo: CashbackTypes;
}
const Page = (props: Props) => {
    const { cashbackInfo } = props;
    const t = useTranslations("cashback");
    const columns: TableHeaderItem[] = [
        {
            title: <div className={"text-center text-primary-color"}>VIP</div>,
            dataIndex: "level",
            align: "center",
            width: "20%",
            render: (item: Rule) => (
                <div className={"text-[0.13rem] font-bold text-[#2b2b2b]"}>{item.level}</div>
            ),
        },
        {
            title: <div className={"text-center text-primary-color"}>APOSTA</div>,
            dataIndex: "aposta",
            align: "center",
            width: "40%",
            render: (item: Rule) => (
                <div className={"text-[0.13rem] font-bold text-[#2b2b2b]"}>{item.aposta} + BRL</div>
            ),
        },
        {
            title: (
                <div className={"text-center text-primary-color"}>CASHBACK</div>
            ) as JSX.Element,
            dataIndex: "cashback",
            align: "center",
            render: (item: Rule) => (
                <div className={"text-[0.13rem] font-bold text-[#2b2b2b]"}>{item.cashback}%</div>
            ),
        },
    ];
    const loadMore = async () => {
        return Promise.resolve();
    };
    return (
        <Box className={"mt-[10px] rounded-[10px] bg-[#ededed]"}>
            <div> {t("cashbackStatus")}</div>
            <Table
                columns={columns}
                dataSource={cashbackInfo.rules}
                loadMore={loadMore}
                hasMore={false}
                isLoadMore={false}
                isBackground={true}
            />
        </Box>
    );
};

export default Page;
