"use client";
import { CashbackTypes } from "@/api/cashback";
import ButtonOwn from "@/components/ButtonOwn";
import { server } from "@/utils/client";
import { timeFormat } from "@/utils/methods";
import { Toast } from "antd-mobile";
import { useAnimate } from "framer-motion";
import { useTranslations } from "next-intl";
interface Props {
    local: string;
    cashbackInfo: CashbackTypes;
}
const Extract = (props: Props) => {
    const { local, cashbackInfo } = props;
    const [scope, animate] = useAnimate();

    const t = useTranslations("cashback");
    const getCashbackGiveApi = () => {
        if (cashbackInfo.status !== "pending") {
            animate(
                scope.current,
                { color: ["#000", "#ffaa30", "#000"] },
                {
                    duration: 0.6,
                    repeat: 2,
                    repeatType: "loop",
                }
            );
            return;
        }
        return server
            .post({
                url: "/v1/api/front/activity_cash_give",
            })
            .then((res) => {
                if (res.code === 200) Toast.show("Success");
            });
    };
    return (
        <>
            <ButtonOwn
                active={true}
                style={{ height: "0.28rem", lineHeight: "0.28rem" }}
                callbackFun={getCashbackGiveApi}
            >
                <span className={"text-[0.1rem]"}>{t("receiveButton")}</span>
            </ButtonOwn>

            <div className={"mt-[0.05rem]"} ref={scope}>
                <p> {t("afterTips")} </p>
                <p>
                    {timeFormat(cashbackInfo.next_period.start_time, local)} ~{" "}
                    {timeFormat(cashbackInfo.next_period.end_time, local)}
                </p>
            </div>
        </>
    );
};

export default Extract;
