monisuo/flutter_monisuo/lib/ui/pages/home/hot_coins_section.dart

import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:shadcn_ui/shadcn_ui.dart';
import '../../../core/theme/app_color_scheme.dart';
import '../../../core/theme/app_spacing.dart';

/// 首页热门币种区块
class HotCoinsSection extends StatelessWidget {
  const HotCoinsSection({super.key});

  @override
  Widget build(BuildContext context) {
    final colorScheme = Theme.of(context).colorScheme;
    final isDark = Theme.of(context).brightness == Brightness.dark;

    return Column(
      children: [
        // Title row
        Padding(
          padding: const EdgeInsets.symmetric(horizontal: 16),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Text(
                '热门币种',
                style: GoogleFonts.inter(
                  fontSize: 16,
                  fontWeight: FontWeight.w600,
                  color: colorScheme.onSurface,
                ),
              ),
              Text(
                '更多',
                style: GoogleFonts.inter(
                  fontSize: 12,
                  color: colorScheme.onSurfaceVariant,
                ),
              ),
            ],
          ),
        ),
        const SizedBox(height: 12),
        // Card
        Container(
          decoration: BoxDecoration(
            color: colorScheme.surfaceContainer,
            border: Border.all(
              color: colorScheme.outlineVariant,
              width: 1,
            ),
            borderRadius: BorderRadius.circular(AppRadius.xl),
          ),
          child: Column(
            children: [
              _CoinRow(
                symbol: 'BTC',
                pair: 'BTC/USDT',
                fullName: 'Bitcoin',
                price: '68,432.50',
                change: '+2.35%',
                isUp: true,
                colorScheme: colorScheme,
                isDark: isDark,
              ),
              Divider(
                height: 1,
                thickness: 1,
                color: colorScheme.outlineVariant.withValues(alpha: 0.15),
              ),
              _CoinRow(
                symbol: 'ETH',
                pair: 'ETH/USDT',
                fullName: 'Ethereum',
                price: '3,856.20',
                change: '+1.82%',
                isUp: true,
                colorScheme: colorScheme,
                isDark: isDark,
              ),
              Divider(
                height: 1,
                thickness: 1,
                color: colorScheme.outlineVariant.withValues(alpha: 0.15),
              ),
              _CoinRow(
                symbol: 'SOL',
                pair: 'SOL/USDT',
                fullName: 'Solana',
                price: '178.65',
                change: '-0.94%',
                isUp: false,
                colorScheme: colorScheme,
                isDark: isDark,
              ),
            ],
          ),
        ),
      ],
    );
  }
}

class _CoinRow extends StatelessWidget {
  const _CoinRow({
    required this.symbol,
    required this.pair,
    required this.fullName,
    required this.price,
    required this.change,
    required this.isUp,
    required this.colorScheme,
    required this.isDark,
  });

  final String symbol;
  final String pair;
  final String fullName;
  final String price;
  final String change;
  final bool isUp;
  final ColorScheme colorScheme;
  final bool isDark;

  @override
  Widget build(BuildContext context) {
    final changeColor = isUp
        ? AppColorScheme.getUpColor(isDark)
        : AppColorScheme.down;

    return Padding(
      padding: const EdgeInsets.symmetric(vertical: 14, horizontal: 16),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          // Left: avatar + name
          Row(
            children: [
              CircleAvatar(
                radius: 18,
                backgroundColor: colorScheme.primary.withValues(alpha: 0.1),
                child: Text(
                  symbol,
                  style: GoogleFonts.inter(
                    fontSize: 10,
                    fontWeight: FontWeight.w700,
                    color: colorScheme.primary,
                  ),
                ),
              ),
              const SizedBox(width: 12),
              Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(
                    pair,
                    style: GoogleFonts.inter(
                      fontSize: 14,
                      fontWeight: FontWeight.bold,
                      color: colorScheme.onSurface,
                    ),
                  ),
                  Text(
                    fullName,
                    style: GoogleFonts.inter(
                      fontSize: 11,
                      color: colorScheme.onSurfaceVariant,
                    ),
                  ),
                ],
              ),
            ],
          ),
          // Right: price + change
          Column(
            crossAxisAlignment: CrossAxisAlignment.end,
            children: [
              Text(
                price,
                style: GoogleFonts.inter(
                  fontSize: 14,
                  fontWeight: FontWeight.w600,
                  color: colorScheme.onSurface,
                ),
              ),
              Text(
                change,
                style: GoogleFonts.inter(
                  fontSize: 11,
                  fontWeight: FontWeight.w500,
                  color: changeColor,
                ),
              ),
            ],
          ),
        ],
      ),
    );
  }
}