import 'package:flutter/material.dart';

class InfoGame extends StatelessWidget {
  final String step1;
  final String step2;
  final String step3;
  final String step4;
  final String points;

  const InfoGame({
    super.key,
    this.step1 =
        'Steg 1:  Välj om ni vill köra ett vilt 🔥 eller lugnt ❄️ spel.',
    this.step2 =
        'Steg 2:  En i gruppen 🧑‍💼 startar spelet och får en kod. Alla andra skriver in koden för att gå med.',
    this.step3 =
        'Steg 3:  Snurra hjulet 🎡 Spelaren som står på tur snurrar hjulet!',
    this.step4 =
        'Steg 4: Gör utmaningen!🎯 Utför utmaningen som visas på skärmen!',
    this.points =
        '🏆 Få poäng när du klarar en utmaning. Du får endast välja sanning 2 gånger i rad.',
  });

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      extendBodyBehindAppBar: true,
      appBar: AppBar(
        backgroundColor: Colors.transparent,
        elevation: 0,
        iconTheme: IconThemeData(color: Colors.white),
      ),
      body: Container(
        width: double.infinity,
        decoration: const BoxDecoration(
          gradient: LinearGradient(
            begin: Alignment.topCenter,
            end: Alignment.bottomCenter,
            colors: [Color(0xFF4B176A), Color(0xFF7A28A5), Color(0xFFF9377B)],
          ),
        ),
        child: SafeArea(
          child: SingleChildScrollView(
            child: Padding(
              padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 16),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  SizedBox(height: 12),
                  Center(
                    child: Text(
                      'Hur fungerar spelet?',
                      style: TextStyle(
                        color: Colors.white,
                        fontSize: 26,
                        fontWeight: FontWeight.bold,
                        letterSpacing: 0.5,
                      ),
                    ),
                  ),
                  SizedBox(height: 6),
                  Center(
                    child: Text(
                      'Snabbguide till HopSpot',
                      style: TextStyle(
                        color: Colors.white70,
                        fontSize: 16,
                        fontWeight: FontWeight.w400,
                      ),
                    ),
                  ),
                  SizedBox(height: 28),
                  _infoCard(text: points),
                  SizedBox(height: 20),
                  _infoCard(number: 1, text: step1),
                  SizedBox(height: 16),
                  _infoCard(number: 2, text: step2),
                  SizedBox(height: 16),
                  _infoCard(number: 3, text: step3),
                  SizedBox(height: 16),
                  _infoCard(number: 4, text: step4),
                  SizedBox(height: 30),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }

  Widget _infoCard({int? number, required String text}) {
    Widget leading;
    if (number != null) {
      leading = CircleAvatar(
        backgroundColor: Colors.white,
        radius: 18,
        child: Text(
          '$number',
          style: TextStyle(
            color: Color(0xFF7A28A5),
            fontWeight: FontWeight.bold,
            fontSize: 18,
          ),
        ),
      );
    } else {
      leading = CircleAvatar(
        backgroundColor: Colors.white24,
        radius: 18,
        child: Text(
          'i',
          style: TextStyle(
            color: Colors.white,
            fontWeight: FontWeight.bold,
            fontSize: 18,
          ),
        ),
      );
    }

    return Card(
      color: Colors.white.withValues(alpha: 0.18),
      elevation: 0,
      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(20)),
      child: Padding(
        padding: const EdgeInsets.symmetric(horizontal: 18, vertical: 18),
        child: Row(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            leading,
            SizedBox(width: 16),
            Expanded(
              child: Text(
                text,
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 16,
                  fontWeight: FontWeight.w500,
                  height: 1.4,
                ),
                textAlign: TextAlign.left,
              ),
            ),
          ],
        ),
      ),
    );
  }
}