import 'package:flutter/material.dart';
import 'package:superport/screens/common/theme_tailwind.dart';

/// 메트로닉 스타일 통계 카드 위젯 (SRP 분리)
class MetronicStatsCard extends StatelessWidget {
  final String title;
  final String value;
  final String? subtitle;
  final IconData? icon;
  final Color? iconBackgroundColor;
  final bool showTrend;
  final double? trendPercentage;
  final bool isPositiveTrend;

  const MetronicStatsCard({
    Key? key,
    required this.title,
    required this.value,
    this.subtitle,
    this.icon,
    this.iconBackgroundColor,
    this.showTrend = false,
    this.trendPercentage,
    this.isPositiveTrend = true,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: AppThemeTailwind.cardDecoration,
      padding: const EdgeInsets.all(12),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        mainAxisSize: MainAxisSize.min,
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Text(
                title,
                style: AppThemeTailwind.bodyStyle.copyWith(
                  color: AppThemeTailwind.muted,
                  fontSize: 12,
                ),
              ),
              if (icon != null)
                Container(
                  padding: const EdgeInsets.all(6),
                  decoration: BoxDecoration(
                    color: iconBackgroundColor ?? AppThemeTailwind.light,
                    shape: BoxShape.circle,
                  ),
                  child: Icon(
                    icon,
                    color:
                        iconBackgroundColor != null
                            ? Colors.white
                            : AppThemeTailwind.primary,
                    size: 16,
                  ),
                ),
            ],
          ),
          const SizedBox(height: 8),
          Text(
            value,
            style: const TextStyle(
              fontSize: 20,
              fontWeight: FontWeight.bold,
              color: AppThemeTailwind.dark,
            ),
          ),
          if (subtitle != null || showTrend) const SizedBox(height: 4),
          if (subtitle != null)
            Text(subtitle!, style: AppThemeTailwind.smallText),
          if (showTrend && trendPercentage != null)
            Row(
              children: [
                Icon(
                  isPositiveTrend ? Icons.arrow_upward : Icons.arrow_downward,
                  color:
                      isPositiveTrend
                          ? AppThemeTailwind.success
                          : AppThemeTailwind.danger,
                  size: 12,
                ),
                const SizedBox(width: 4),
                Text(
                  '${trendPercentage!.toStringAsFixed(1)}%',
                  style: TextStyle(
                    color:
                        isPositiveTrend
                            ? AppThemeTailwind.success
                            : AppThemeTailwind.danger,
                    fontWeight: FontWeight.w600,
                    fontSize: 12,
                  ),
                ),
              ],
            ),
        ],
      ),
    );
  }
}