import useResponsive from "../../hooks/useResponsive.js";
import usePisellConfig from "../pisell-config-provider/hooks/usePisellConfig.js";
import React, { useEffect, useMemo } from "react";
import { formatAmountWithOptions } from "@pisell/utils";
import { Statistic } from "antd";
import classNames from "classnames";
import "./index.less";
//#region src/components/cardMetricItem/index.tsx
const CardMetricItem = (props) => {
	useEffect(() => {
		document.body.id = "body";
	}, []);
	const { title = "", number, hint, tags, showCurrencySymbol = true, style } = props;
	const config = usePisellConfig();
	const amount = useMemo(() => {
		return formatAmountWithOptions(number, (config === null || config === void 0 ? void 0 : config.symbol) || "", { showCurrencySymbol });
	}, [number, showCurrencySymbol]);
	const responsive = useResponsive();
	return /* @__PURE__ */ React.createElement("div", {
		className: classNames("pisell-statistic-wrap", responsive === "pc" ? "pc" : "phone"),
		style
	}, /* @__PURE__ */ React.createElement("div", { className: classNames("pisell-statistic-hint") }, hint), /* @__PURE__ */ React.createElement("div", { className: classNames("pisell-statistic-tags") }, tags), /* @__PURE__ */ React.createElement(Statistic, {
		title,
		value: amount
	}));
};
//#endregion
export { CardMetricItem as default };
