import 'package:english_learning/core/utils/styles/theme.dart';
import 'package:english_learning/features/learning/modules/exercises/providers/exercise_provider.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

class ExerciseProgress extends StatelessWidget {
  const ExerciseProgress({super.key});

  @override
  Widget build(BuildContext context) {
    final exerciseProvider = Provider.of<ExerciseProvider>(context);
    final totalExercises = exerciseProvider.exercises.length;
    final answeredCount = exerciseProvider.getAnsweredCount();
    final progress = exerciseProvider.getProgress();

    return LayoutBuilder(
      builder: (context, constraints) {
        final barWidth =
            (constraints.maxWidth - 130).clamp(0.0, double.infinity);

        return Row(
          children: [
            SizedBox(
              width: barWidth,
              child: Container(
                height: 20,
                decoration: BoxDecoration(
                  border: Border.all(
                    color: AppColors.blueColor,
                  ),
                  borderRadius: BorderRadius.circular(20),
                ),
                child: ClipRRect(
                  borderRadius: BorderRadius.circular(20),
                  child: Stack(
                    children: [
                      Container(
                        color: AppColors.whiteColor,
                      ),
                      AnimatedContainer(
                        duration: const Duration(milliseconds: 300),
                        curve: Curves.easeInOut,
                        width: (barWidth * progress).clamp(0.0, barWidth),
                        decoration: BoxDecoration(
                          color: AppColors.blueColor,
                          borderRadius: BorderRadius.circular(20),
                        ),
                      ),
                    ],
                  ),
                ),
              ),
            ),
            const Spacer(),
            Text(
              '$answeredCount of $totalExercises Answered',
              style: AppTextStyles.greyTextStyle.copyWith(
                fontSize: 14,
                fontWeight: FontWeight.w400,
              ),
            )
          ],
        );
      },
    );
  }
}
