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

/// 幣種卡片組件 - 用於顯示幣種信息
///
/// 設計規則:
/// - 使用 surface 層次而非邊框
/// - 圓角: xl (16px) 卡片, sm (4px) 漲跌標籤
/// - 漲跌標籤: 15% 透明度背景
class CoinCard extends StatelessWidget {
  final String code;
  final String name;
  final String price;
  final String change;
  final bool isUp;
  final String? icon;
  final VoidCallback? onTap;

  const CoinCard({
    super.key,
    required this.code,
    required this.name,
    required this.price,
    required this.change,
    this.isUp = true,
    this.icon,
    this.onTap,
  });

  @override
  Widget build(BuildContext context) {
    final theme = ShadTheme.of(context);

    return ShadCard(
      padding: const EdgeInsets.all(AppSpacing.md),
      child: InkWell(
        onTap: onTap,
        child: Row(
          children: [
            // 圖標 - 圓形
            Container(
              width: 44,
              height: 44,
              decoration: BoxDecoration(
                color: theme.colorScheme.primary.withValues(alpha: 0.1),
                shape: BoxShape.circle,
              ),
              child: Center(
                child: Text(
                  icon ?? code.substring(0, 1),
                  style: TextStyle(
                    fontSize: 16,
                    color: theme.colorScheme.primary,
                    fontWeight: FontWeight.bold,
                  ),
                ),
              ),
            ),
            const SizedBox(width: AppSpacing.sm),
            // 名稱
            Expanded(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(
                    '$code/USDT',
                    style: theme.textTheme.large.copyWith(
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                  Text(
                    name,
                    style: theme.textTheme.muted,
                  ),
                ],
              ),
            ),
            // 漲跌幅 - Dynamic Chip
            Container(
              padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 6),
              decoration: BoxDecoration(
                color: isUp ? context.appColors.upBackground : context.appColors.downBackground,
                borderRadius: BorderRadius.circular(AppRadius.sm),
              ),
              child: Text(
                change,
                style: TextStyle(
                  color: isUp ? context.appColors.up : context.appColors.down,
                  fontWeight: FontWeight.w600,
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}