import 'package:flutter/material.dart';

class StatCard extends StatelessWidget {
  final String title;
  final String playerName;
  final String statValue;
  final String statLabel;
  final Color color;
  final IconData icon;
  final bool isHighlighted;
  final VoidCallback? onTap;
  
  // Variáveis novas para que o tamanho não fique preso à HomeConfig
  final double sf;
  final double cardWidth;
  final double cardHeight;

  const StatCard({
    super.key,
    required this.title,
    required this.playerName,
    required this.statValue,
    required this.statLabel,
    required this.color,
    required this.icon,
    this.isHighlighted = false,
    this.onTap,
    this.sf = 1.0, // Default 1.0 para não dar erro se não passares o valor
    required this.cardWidth,
    required this.cardHeight,
  });

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: cardWidth,
      height: cardHeight,
      child: Card(
        elevation: 0,
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(20 * sf),
          side: isHighlighted 
            ? BorderSide(color: Colors.amber, width: 2 * sf)
            : BorderSide.none,
        ),
        child: InkWell(
          onTap: onTap,
          borderRadius: BorderRadius.circular(20 * sf),
          child: Container(
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(20 * sf),
              gradient: LinearGradient(
                begin: Alignment.topCenter,
                end: Alignment.bottomCenter,
                colors: [
                  color.withOpacity(0.9),
                  color.withOpacity(0.7),
                ],
              ),
            ),
            child: Padding(
              padding: EdgeInsets.all(16.0 * sf),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  // Cabeçalho
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Expanded(
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            Text(
                              title.toUpperCase(),
                              style: TextStyle(fontSize: 11 * sf, fontWeight: FontWeight.bold, color: Colors.white70),
                            ),
                            SizedBox(height: 2 * sf),
                            Text(
                              playerName,
                              style: TextStyle(fontSize: 14 * sf, fontWeight: FontWeight.bold, color: Colors.white),
                              maxLines: 1,
                              overflow: TextOverflow.ellipsis,
                            ),
                          ],
                        ),
                      ),
                      if (isHighlighted)
                        Container(
                          padding: EdgeInsets.all(6 * sf),
                          decoration: const BoxDecoration(
                            color: Colors.amber,
                            shape: BoxShape.circle,
                          ),
                          child: Icon(
                            Icons.star,
                            size: 16 * sf,
                            color: Colors.white,
                          ),
                        ),
                    ],
                  ),
                  
                  SizedBox(height: 8 * sf),
                  
                  // Ícone
                  Container(
                    width: 45 * sf,
                    height: 45 * sf,
                    decoration: BoxDecoration(
                      color: Colors.white.withOpacity(0.2),
                      shape: BoxShape.circle,
                    ),
                    child: Icon(
                      icon,
                      size: 24 * sf,
                      color: Colors.white,
                    ),
                  ),
                  
                  const Spacer(),
                  
                  // Estatística
                  Center(
                    child: Column(
                      children: [
                        Text(
                          statValue,
                          style: TextStyle(fontSize: 34 * sf, fontWeight: FontWeight.bold, color: Colors.white),
                        ),
                        SizedBox(height: 2 * sf),
                        Text(
                          statLabel.toUpperCase(),
                          style: TextStyle(fontSize: 12 * sf, color: Colors.white70),
                        ),
                      ],
                    ),
                  ),
                  
                  const Spacer(),
                  
                  // Botão
                  Container(
                    width: double.infinity,
                    padding: EdgeInsets.symmetric(vertical: 8 * sf),
                    decoration: BoxDecoration(
                      color: Colors.white.withOpacity(0.2),
                      borderRadius: BorderRadius.circular(10 * sf),
                    ),
                    child: Center(
                      child: Text(
                        'VER DETALHES',
                        style: TextStyle(
                          color: Colors.white,
                          fontWeight: FontWeight.bold,
                          fontSize: 11 * sf,
                          letterSpacing: 1,
                        ),
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}

class SportGrid extends StatelessWidget {
  final List<Widget> children;
  final double spacing;

  const SportGrid({
    super.key,
    required this.children,
    this.spacing = 20.0, // Valor padrão se não for passado nada
  });

  @override
  Widget build(BuildContext context) {
    if (children.isEmpty) return const SizedBox();
    
    return Column(
      children: [
        // Primeira linha
        if (children.length >= 2)
          Padding(
            padding: EdgeInsets.only(bottom: spacing),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                children[0],
                SizedBox(width: spacing),
                children[1],
              ],
            ),
          ),
        
        // Segunda linha
        if (children.length >= 4)
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              children[2],
              SizedBox(width: spacing),
              children[3],
            ],
          ),
      ],
    );
  }
}