"use strict";
Object.defineProperty(exports, "__esModule", {
    value: true
});
Object.defineProperty(exports, "FundingRate", {
    enumerable: true,
    get: function() {
        return FundingRate;
    }
});
const _jsxruntime = require("react/jsx-runtime");
const _statistic = require("../../statistic");
const _react = require("react");
const _utils = require("@orderly.network/utils");
const FundingRate = (props)=>{
    const [time, setTime] = (0, _react.useState)("00:00:00");
    (0, _react.useEffect)(()=>{
        if (!props.timout || props.timout <= 0) {
            return;
        }
        const timer = setInterval(()=>{
            const diff = new Date(props.timout).getTime() - Date.now();
            const result = (0, _utils.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__*/ (0, _jsxruntime.jsx)(_statistic.Statistic, {
        label: "Pred. funding rate",
        value: /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
            className: "orderly-flex orderly-items-center",
            children: [
                /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
                    className: "orderly-text-yellow-500",
                    children: `${props.fundingRate}%`
                }),
                /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
                    className: "orderly-text-gray-400 orderly-ml-1",
                    children: `in ${time}`
                })
            ]
        })
    });
};

//# sourceMappingURL=fundingRate.js.map