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

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

  @override
  Widget build(BuildContext context) {
    return Dialog(
      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(16)),
      elevation: 0,
      backgroundColor: Colors.transparent,
      child: Container(
        decoration: BoxDecoration(
          color: AppColors.whiteColor,
          shape: BoxShape.rectangle,
          borderRadius: BorderRadius.circular(16),
          boxShadow: const [
            BoxShadow(
              color: Colors.black26,
              blurRadius: 10.0,
              offset: Offset(0.0, 10.0),
            ),
          ],
        ),
        child: Padding(
          padding: const EdgeInsets.symmetric(vertical: 24),
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              Text(
                'Instructions',
                style: AppTextStyles.blackTextStyle.copyWith(
                  fontSize: 22,
                  fontWeight: FontWeight.bold,
                ),
              ),
              const SizedBox(height: 16),
              const Divider(
                thickness: 0.5,
              ),
              Padding(
                padding: const EdgeInsets.only(top: 32, left: 32, right: 32),
                child: Column(
                  children: [
                    _buildInstructionItem(
                      icon: BootstrapIcons.chat_square_text,
                      text: 'Answer all questions to complete the exercise.',
                    ),
                    const SizedBox(height: 12),
                    _buildInstructionItem(
                      icon: BootstrapIcons.arrow_left_right,
                      text:
                          'For matching pairs, select a left option first, then match it with a right option.',
                    ),
                    const SizedBox(height: 12),
                    _buildInstructionItem(
                      icon: BootstrapIcons.pencil,
                      text:
                          'You can change your answers at any time before submitting.',
                    ),
                    const SizedBox(height: 32),
                    GlobalButton(
                      text: 'Got It',
                      onPressed: () => Navigator.of(context).pop(),
                    ),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }

  Widget _buildInstructionItem({required IconData icon, required String text}) {
    return Row(
      children: [
        Icon(
          icon,
          color: AppColors.blueColor,
          size: 24,
        ),
        const SizedBox(width: 16),
        Expanded(
          child: Text(
            text,
            style: AppTextStyles.greyTextStyle.copyWith(fontSize: 14),
          ),
        ),
      ],
    );
  }
}
