import 'package:flutter/material.dart';
import 'package:frontend/provider/quote_provider.dart';
import 'package:provider/provider.dart';
import 'package:frontend/values/strings.dart';
import 'package:frontend/values/constants.dart';

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

  @override
  Widget build(BuildContext context) {
    final provider = Provider.of<QuoteProvider>(context);

    final screenWidth = MediaQuery.of(context).size.width;

    return Card(
      margin: const EdgeInsets.all(Constants.edgeInset),
      child: Padding(
        padding: const EdgeInsets.all(Constants.edgeInset),
        child: Column(
          mainAxisSize: MainAxisSize.min,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            const Spacer(),
            
            Padding(
              padding: const EdgeInsets.all(Constants.edgeInset),
              child: Text(
                provider.randomQuoteText,
                textAlign: TextAlign.center,
                style: TextStyle(
                  fontSize: screenWidth * 0.06, // responsive text
                  fontWeight: FontWeight.w500,
                ),
              ),
            ),

            const Spacer(),

            // Buttons side by side
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                Expanded(
                  child: Padding(
                    padding: const EdgeInsets.all(Constants.edgeInset),
                    child: TextButton.icon(
                      onPressed: provider.flipRandomQuote,
                      icon: const Icon(
                        Icons.repeat,
                        size: 28,
                      ),
                      label: Text(
                        Strings.flipFlashcard,
                        style: TextStyle(
                          fontSize: screenWidth * 0.045,
                        ),
                      ),
                      style: TextButton.styleFrom(
                        padding: const EdgeInsets.symmetric(vertical: 16),
                      ),
                    ),
                  ),
                ),
                Expanded(
                  child: Padding(
                    padding: const EdgeInsets.all(Constants.edgeInset),
                    child: TextButton.icon(
                      onPressed: provider.nextRandomQuote,
                      icon: const Icon(
                        Icons.arrow_right_alt,
                        size: 28,
                      ),
                      label: Text(
                        Strings.nextFlashcard,
                        style: TextStyle(
                          fontSize: screenWidth * 0.045,
                        ),
                      ),
                      style: TextButton.styleFrom(
                        padding: const EdgeInsets.symmetric(vertical: 16),
                      ),
                    ),
                  ),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}