import React from 'react';
import { Card, Row, Col, Statistic } from 'antd';
import { formatMoney } from '@rent/shared-utils';
import type { Account } from '@rent/shared-types';

interface AccountCardProps {
  account: Account;
  loading?: boolean;
}

/**
 * 账户信息卡片组件
 */
export const AccountCard: React.FC<AccountCardProps> = ({ account, loading = false }) => {
  return (
    <Card loading={loading}>
      <Row gutter={16}>
        <Col span={6}>
          <Statistic
            title="账户余额"
            value={account.balance}
            precision={2}
            prefix="¥"
            valueStyle={{ color: '#1890ff' }}
          />
        </Col>
        <Col span={6}>
          <Statistic
            title="冻结金额"
            value={account.frozenAmount}
            precision={2}
            prefix="¥"
            valueStyle={{ color: '#faad14' }}
          />
        </Col>
        <Col span={6}>
          <Statistic
            title="可用余额"
            value={account.availableAmount}
            precision={2}
            prefix="¥"
            valueStyle={{ color: '#52c41a' }}
          />
        </Col>
        <Col span={6}>
          <Statistic
            title="累计收入"
            value={account.totalIncome}
            precision={2}
            prefix="¥"
          />
        </Col>
      </Row>
      <Row gutter={16} style={{ marginTop: 24 }}>
        <Col span={6}>
          <Statistic
            title="累计支出"
            value={account.totalExpense}
            precision={2}
            prefix="¥"
          />
        </Col>
      </Row>
    </Card>
  );
};
