import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Statistic } from "../../statistic";
import { useEffect, useState } from "react";
import { timeConvertString } from "@orderly.network/utils";
export const FundingRate = (props)=>{
    const [time, setTime] = useState("00:00:00");
    useEffect(()=>{
        if (!props.timout || props.timout <= 0) {
            return;
        }
        const timer = setInterval(()=>{
            const diff = new Date(props.timout).getTime() - Date.now();
            const result = timeConvertString(diff);
            if (result.length === 3) {
                setTime(`${result[0].toString().padStart(2, "0")}:${result[1].toString().padStart(2, "0")}:${result[2].toString().padStart(2, "0")}`);
            }
        }, 1000);
        return ()=>{
            clearInterval(timer);
        };
    }, [
        props.timout
    ]);
    return /*#__PURE__*/ _jsx(Statistic, {
        label: "Pred. funding rate",
        value: /*#__PURE__*/ _jsxs("div", {
            className: "orderly-flex orderly-items-center",
            children: [
                /*#__PURE__*/ _jsx("span", {
                    className: "orderly-text-yellow-500",
                    children: `${props.fundingRate}%`
                }),
                /*#__PURE__*/ _jsx("span", {
                    className: "orderly-text-gray-400 orderly-ml-1",
                    children: `in ${time}`
                })
            ]
        })
    });
};

//# sourceMappingURL=fundingRate.js.map