import { CashbackTypes } from "@/api/cashback";
import Box from "@/components/Box";
import { timeFormat } from "@/utils/methods";
import { getLocale, getTranslations } from "next-intl/server";
import Extract from "./components/Extract";

interface Props {
    cashbackInfo: CashbackTypes;
}
const Page = async (props: Props) => {
    const { cashbackInfo } = props;
    const local = await getLocale();
    const t = await getTranslations("cashback");
    return (
        <Box className={"mt-[10px] rounded-[10px] bg-[#e8e8e8]"}>
            <div className={"flex"}>
                <div className={"flex-1"}>
                    <h1 className={"text-[0.18rem] font-black text-primary-color"}>
                        {t("weekCashback")}
                    </h1>
                    <p className={"text-[0.12rem]"}>
                        <span> {t("weekTips")} </span>
                        <span className={"text-primary-color"}>{cashbackInfo.amount ?? "???"}</span>
                        <span> {t("weekAfterTips")} </span>
                    </p>
                </div>

                <div className={"relative flex-shrink-0"}>
                    <img
                        src="/img/free.png"
                        alt=""
                        className={"absolute -left-[0.1rem] bottom-[0.15rem] w-[0.4rem]"}
                    />
                    <img src="/img/cash.png" alt="" className={"ml-[0.08rem] w-[0.8rem]"} />
                </div>
            </div>
            <p className={"mb-[0.05rem] text-[0.12rem] text-[#ff9323]"}>
                <span>
                    {t("beforeTips")} {timeFormat(cashbackInfo.last_period.start_time, local)} ~{" "}
                    {timeFormat(cashbackInfo.last_period.end_time, local)}
                </span>
            </p>
            <Extract cashbackInfo={cashbackInfo} local={local} />
        </Box>
    );
};
export default Page;
