monisuo/flutter_monisuo/lib/ui/pages/trade/components/price_card.dart

import 'package:flutter/material.dart';
import '../../../../core/theme/app_spacing.dart';
import '../../../../core/theme/app_theme.dart';
import '../../../../core/theme/app_theme_extension.dart';
import '../../../../data/models/coin.dart';

/// 价格卡片组件
///
/// 显示当前币种价格和 24h 涨跌幅。
/// 布局：大号价格(32px bold) + 涨跌幅徽章(圆角sm，涨绿背景) + "24h 变化" 副标题。
class PriceCard extends StatelessWidget {
  final Coin coin;
  const PriceCard({super.key, required this.coin});

  @override
  Widget build(BuildContext context) {
    final isUp = coin.isUp;
    final changeColor =
        isUp ? context.appColors.up : context.appColors.down;
    final changeBgColor = isUp
        ? context.appColors.upBackground
        : context.appColors.downBackground;

    return Container(
      width: double.infinity,
      padding: const EdgeInsets.all(AppSpacing.md + AppSpacing.sm),
      decoration: BoxDecoration(
        color: context.appColors.surfaceCard,
        borderRadius: BorderRadius.circular(AppRadius.lg),
        border: Border.all(
          color: context.appColors.ghostBorder,
        ),
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          // 价格行：大号价格 + 涨跌幅徽章
          Row(
            children: [
              Text(
                coin.formattedPrice,
                style: AppTextStyles.numberLarge(context).copyWith(fontSize: 32),
              ),
              const SizedBox(width: AppSpacing.sm),
              // 涨跌幅徽章 - 圆角sm，涨绿背景
              Container(
                padding: const EdgeInsets.symmetric(
                    horizontal: AppSpacing.sm, vertical: AppSpacing.xs),
                decoration: BoxDecoration(
                  color: changeBgColor,
                  borderRadius: BorderRadius.circular(AppRadius.sm),
                ),
                child: Text(
                  coin.formattedChange,
                  style: AppTextStyles.numberSmall(context).copyWith(
                    color: changeColor,
                    fontWeight: FontWeight.w600,
                  ),
                ),
              ),
            ],
          ),
          const SizedBox(height: AppSpacing.sm),
          // 副标题
          Text(
            '24h 变化',
            style: AppTextStyles.bodySmall(context),
          ),
        ],
      ),
    );
  }
}