import 'package:flutter/material.dart';
import 'package:english_learning/core/utils/styles/theme.dart';

class ProgressBar extends StatelessWidget {
  final int completedTopics;
  final int totalTopics;

  const ProgressBar({
    super.key,
    required this.completedTopics,
    required this.totalTopics,
  });

  @override
  Widget build(BuildContext context) {
    final mediaQuery = MediaQuery.of(context);
    final screenHeight = mediaQuery.size.height;
    final progress = totalTopics > 0 ? completedTopics / totalTopics : 0.0;

    return LayoutBuilder(
      builder: (context, constraints) {
        final barWidth = constraints.maxWidth - 30;

        return Column(
          crossAxisAlignment: CrossAxisAlignment.end,
          children: [
            SizedBox(
              width: double.infinity,
              child: Container(
                height: 12,
                decoration: BoxDecoration(
                  color: Colors.grey.shade200,
                  borderRadius: BorderRadius.circular(7),
                ),
                child: Stack(
                  children: [
                    AnimatedContainer(
                      duration: const Duration(milliseconds: 300),
                      curve: Curves.easeInOut,
                      width: barWidth * progress,
                      decoration: BoxDecoration(
                        color: AppColors.blueColor,
                        borderRadius: BorderRadius.circular(7),
                      ),
                    ),
                  ],
                ),
              ),
            ),
            // const Spacer(),
            SizedBox(
              height: screenHeight * 0.02,
            ),
            RichText(
              text: TextSpan(
                text: '$completedTopics/$totalTopics ',
                style: AppTextStyles.blueTextStyle.copyWith(
                  fontWeight: FontWeight.w900,
                  fontSize: 12,
                ),
                children: [
                  TextSpan(
                    text: 'Topics Completed',
                    style: AppTextStyles.blueTextStyle.copyWith(
                      fontWeight: FontWeight.w500,
                    ),
                  )
                ],
              ),
            ),
          ],
        );
      },
    );
  }
}