import React, { useEffect, useMemo } from 'react';
import { Statistic } from 'antd';
import classNames from 'classnames';
import { formatAmountWithOptions } from '@pisell/utils';
import { useResponsive } from "../../hooks";
import usePisellConfig from "./../pisell-config-provider/hooks/usePisellConfig";
import "./index.less";

/**
 * CardMetricItem 组件 Props
 */

var CardMetricItem = function CardMetricItem(props) {
  useEffect(function () {
    document.body.id = 'body';
  }, []);
  var _props$title = props.title,
    title = _props$title === void 0 ? '' : _props$title,
    number = props.number,
    hint = props.hint,
    tags = props.tags,
    _props$showCurrencySy = props.showCurrencySymbol,
    showCurrencySymbol = _props$showCurrencySy === void 0 ? true : _props$showCurrencySy,
    style = props.style;
  var config = usePisellConfig();
  var amount = useMemo(function () {
    return formatAmountWithOptions(number, (config === null || config === void 0 ? void 0 : config.symbol) || '', {
      showCurrencySymbol: showCurrencySymbol
    });
  }, [number, showCurrencySymbol]);
  var responsive = useResponsive();
  return /*#__PURE__*/React.createElement("div", {
    className: classNames('pisell-statistic-wrap', responsive === 'pc' ? 'pc' : 'phone'),
    style: 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: title,
    value: amount
  }));
};
export default CardMetricItem;