import React from 'react';
import { ArrowUpOutlined, ArrowDownOutlined } from '@ant-design/icons';
import classNames from 'classnames';
import "./index.less";

/**
 * StatCard 统计卡片组件
 * @description 用于展示单个统计数据，包含标题、数值和对比信息
 * @author Pisell Team
 */
var StatCard = function StatCard(props) {
  var title = props.title,
    value = props.value,
    compareValue = props.compareValue,
    trend = props.trend,
    _props$comparePrefix = props.comparePrefix,
    comparePrefix = _props$comparePrefix === void 0 ? 'v.s. pre' : _props$comparePrefix,
    _props$showCompare = props.showCompare,
    showCompare = _props$showCompare === void 0 ? true : _props$showCompare,
    style = props.style,
    className = props.className,
    onClick = props.onClick;

  /** 卡片类名 */
  var cardClassName = classNames('stat-card', {
    'stat-card-clickable': !!onClick
  }, className);

  /** 对比信息类名 */
  var compareClassName = classNames('stat-card-compare', {
    'trend-up': trend === 'up',
    'trend-down': trend === 'down'
  });

  /**
   * 渲染趋势图标
   */
  var renderTrendIcon = function renderTrendIcon() {
    if (!trend) return null;
    if (trend === 'up') {
      //@ts-ignore
      return /*#__PURE__*/React.createElement(ArrowUpOutlined, {
        className: "trend-icon"
      });
    }
    if (trend === 'down') {
      //@ts-ignore
      return /*#__PURE__*/React.createElement(ArrowDownOutlined, {
        className: "trend-icon"
      });
    }
    return null;
  };
  return /*#__PURE__*/React.createElement("div", {
    className: cardClassName,
    style: style,
    onClick: onClick
  }, title && /*#__PURE__*/React.createElement("div", {
    className: "stat-card-title"
  }, title), /*#__PURE__*/React.createElement("div", {
    className: "stat-card-content"
  }, /*#__PURE__*/React.createElement("div", {
    className: "stat-card-value"
  }, value), showCompare && compareValue && /*#__PURE__*/React.createElement("div", {
    className: compareClassName
  }, /*#__PURE__*/React.createElement("span", {
    className: "compare-prefix"
  }, comparePrefix), /*#__PURE__*/React.createElement("span", {
    className: "compare-value"
  }, compareValue), renderTrendIcon())));
};
export default StatCard;