import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:video_player/video_player.dart';
import 'package:chewie/chewie.dart';
import 'package:mobile_application_kids/games.dart';

void main() {
  runApp(SongTalesApp());
}

class SongTalesApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: LevelScreen(),
    );
  }
}

class LevelButton extends StatelessWidget {
  final String imagePath;
  final String?
      label; // Making label parameter optional by adding '?' after String
  final VoidCallback onPressed;

  const LevelButton({
    required this.imagePath,
    this.label, // Making label parameter optional
    required this.onPressed,
  });

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: onPressed,
      style: ElevatedButton.styleFrom(
        primary: Colors.transparent,
        elevation: 0,
        padding: EdgeInsets.zero,
      ),
      child: Column(
        children: [
          Image.asset(
            imagePath,
            width: 400,
            height: 150,
          ),
          SizedBox(height: 8),
          if (label != null) // Only show label if it's not null
            Text(
              label!,
              style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
            ),
        ],
      ),
    );
  }
}

class LevelScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Song Tales'),
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Expanded(
            child: Center(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  LevelButton(
                    imagePath: 'game_assets/slevel1_btn.png',
                    onPressed: () {
                      Navigator.push(
                        context,
                        MaterialPageRoute(
                          builder: (context) => Level1VideoScreen(),
                        ),
                      );
                    },
                  ),
                  SizedBox(height: 10),
                  LevelButton(
                    imagePath: 'game_assets/slevel2_btn.png',
                    onPressed: () {
                      Navigator.push(
                        context,
                        MaterialPageRoute(
                          builder: (context) => Level2VideoScreen(),
                        ),
                      );
                    },
                  ),
                  SizedBox(height: 10),
                  LevelButton(
                    imagePath: 'game_assets/slevel3_btn.png',
                    onPressed: () {
                      Navigator.push(
                        context,
                        MaterialPageRoute(
                          builder: (context) => Level3VideoScreen(),
                        ),
                      );
                    },
                  ),
                ],
              ),
            ),
          ),
          SizedBox(height: 20),
          ElevatedButton(
            onPressed: () {
              Navigator.pushReplacement(
                context,
                MaterialPageRoute(
                  builder: (context) => GamesPage(),
                ),
              );
            },
            child: Text('Quit Game'),
            style: ElevatedButton.styleFrom(
              foregroundColor: Colors.white,
              backgroundColor: Color.fromARGB(255, 231, 65, 43),
            ),
          ),
          SizedBox(height: 40),
        ],
      ),
    );
  }
}

class Level1VideoScreen extends StatefulWidget {
  @override
  _Level1VideoScreenState createState() => _Level1VideoScreenState();
}

class _Level1VideoScreenState extends State<Level1VideoScreen> {
  late VideoPlayerController _controller;
  late ChewieController _chewieController;
  int correctAnswersCount = 0;

  @override
  void initState() {
    super.initState();
    SystemChrome.setPreferredOrientations([
      DeviceOrientation.landscapeLeft,
      DeviceOrientation.landscapeRight,
    ]); // Lock orientation to landscape

    _controller = VideoPlayerController.asset('game_assets/Level1_song.mp4')
      ..initialize().then((_) {
        setState(() {});
        _controller.play();
      });

    _chewieController = ChewieController(
      videoPlayerController: _controller,
      autoPlay: true,
      looping: false,
      allowMuting: false,
      allowPlaybackSpeedChanging: true,
      allowFullScreen: false,
      showControlsOnInitialize: false,
      customControls: MaterialControls(),
      // Enforcing landscape mode
      aspectRatio: 16 / 9,
      // Setting the orientation to landscape
      deviceOrientationsAfterFullScreen: [
        DeviceOrientation.landscapeLeft,
        DeviceOrientation.landscapeRight,
      ],
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          Expanded(
            child: Center(
              child: _controller.value.isInitialized
                  ? Chewie(
                      controller: _chewieController,
                    )
                  : CircularProgressIndicator(),
            ),
          ),
          ElevatedButton(
            onPressed: () {
              _controller.pause();
              Navigator.push(
                context,
                MaterialPageRoute(
                  builder: (context) => Level1QuestionScreen(
                    onCorrectAnswer: () {
                      correctAnswersCount++;
                      if (correctAnswersCount == 4) {
                        Navigator.pop(context); // Pop the QuestionScreen
                        Navigator.push(
                          context,
                          MaterialPageRoute(
                            builder: (context) => ResultScreen(),
                          ),
                        );
                      }
                    },
                  ),
                ),
              );
            },
            child: Text('Answer Question'),
            style: ElevatedButton.styleFrom(
              foregroundColor: Colors.white,
              backgroundColor: Color.fromARGB(255, 48, 173, 26),
            ),
          ),
        ],
      ),
    );
  }

  @override
  void dispose() {
    _controller.pause(); // Pause the video before disposing
    _controller.dispose();
    _chewieController.dispose();
    SystemChrome.setPreferredOrientations([
      DeviceOrientation.portraitUp,
      DeviceOrientation.portraitDown,
    ]); // Unlock orientation
    super.dispose();
  }
}

class Level1QuestionScreen extends StatefulWidget {
  final VoidCallback onCorrectAnswer;

  const Level1QuestionScreen({required this.onCorrectAnswer});

  @override
  _Level1QuestionScreenState createState() => _Level1QuestionScreenState();
}

class _Level1QuestionScreenState extends State<Level1QuestionScreen> {
  late List<String> questions;
  late Map<String, List<String>> questionImageMapping;
  int currentQuestionIndex = 0;
  late List<String> shuffledImages; // Add shuffled images list

  @override
  void initState() {
    super.initState();
    SystemChrome.setPreferredOrientations([
      DeviceOrientation.landscapeLeft,
      DeviceOrientation.landscapeRight,
    ]); // Lock orientation to landscape
    questions = [
      'Select the monkey',
      'Select the giraffe',
      'Select the lion',
      'Select the elephant'
    ];
    questionImageMapping = {
      'Select the monkey': [
        'monkey.png',
        'giraffe.png',
        'elephant.png',
        'gorilla.png',
        'koala.png',
        'lion.png'
      ],
      'Select the giraffe': [
        'giraffe.png',
        'lion.png',
        'elephant.png',
        'koala.png',
        'gorilla.png',
        'monkey.png'
      ],
      'Select the lion': [
        'lion.png',
        'elephant.png',
        'giraffe.png',
        'koala.png',
        'gorilla.png',
        'monkey.png'
      ],
      'Select the elephant': [
        'elephant.png',
        'monkey.png',
        'gorilla.png',
        'giraffe.png',
        'koala.png',
        'lion.png'
      ],
    };
    currentQuestionIndex = 0;
    shuffledImages =
        List.from(questionImageMapping[questions[currentQuestionIndex]]!)
          ..shuffle(); // Shuffle images for the first question
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Question Screen'),
        leading: IconButton(
          icon: Icon(Icons.arrow_back),
          onPressed: () {
            Navigator.pop(context); // Navigate back
          },
        ),
      ),
      body: OrientationBuilder(
        builder: (context, orientation) {
          SystemChrome.setPreferredOrientations([
            DeviceOrientation.landscapeLeft,
            DeviceOrientation.landscapeRight,
          ]); // Lock orientation to landscape
          return orientation == Orientation.landscape
              ? _buildLandscapeContent()
              : _buildPortraitContent();
        },
      ),
    );
  }

  Widget _buildLandscapeContent() {
    return Column(
      children: [
        Padding(
          padding: const EdgeInsets.all(0.0),
          child: Text(
            questions[currentQuestionIndex],
            style: TextStyle(
              fontSize: 25.0,
              fontWeight: FontWeight.bold,
            ),
          ),
        ),
        Expanded(
          child: GridView.count(
            crossAxisCount: 3,
            padding: EdgeInsets.all(20.0),
            mainAxisSpacing: 20.0,
            crossAxisSpacing: 2.0,
            childAspectRatio: 2.5,
            children: shuffledImages.map((imageName) {
              return AnimalImage(
                imageName: imageName,
                correctAnswer: imageName ==
                    questionImageMapping[questions[currentQuestionIndex]]![0],
                nextQuestion: moveToNextQuestion,
                onCorrectAnswer: widget.onCorrectAnswer,
              );
            }).toList(),
          ),
        ),
      ],
    );
  }

  Widget _buildPortraitContent() {
    return Center(
      child: Text(
        'Please rotate your device to landscape mode.',
        style: TextStyle(fontSize: 24.0),
      ),
    );
  }

  void moveToNextQuestion() {
    setState(() {
      if (currentQuestionIndex < questions.length - 1) {
        currentQuestionIndex++;
        shuffledImages =
            List.from(questionImageMapping[questions[currentQuestionIndex]]!)
              ..shuffle(); // Shuffle images for the next question
      } else {
        currentQuestionIndex = 0;
      }
    });
  }

  @override
  void dispose() {
    SystemChrome.setPreferredOrientations([
      DeviceOrientation.landscapeLeft,
      DeviceOrientation.landscapeRight,
    ]); // Lock orientation to landscape
    super.dispose();
  }
}

class Level2VideoScreen extends StatefulWidget {
  @override
  _Level2VideoScreenState createState() => _Level2VideoScreenState();
}

class _Level2VideoScreenState extends State<Level2VideoScreen> {
  late VideoPlayerController _controller;
  late ChewieController _chewieController;
  int correctAnswersCount = 0;

  @override
  void initState() {
    super.initState();
    SystemChrome.setPreferredOrientations([
      DeviceOrientation.landscapeLeft,
      DeviceOrientation.landscapeRight,
    ]); // Lock orientation to landscape

    _controller = VideoPlayerController.asset('game_assets/Level2_song.mp4')
      ..initialize().then((_) {
        setState(() {});
        _controller.play();
      });

    _chewieController = ChewieController(
      videoPlayerController: _controller,
      autoPlay: true,
      looping: false,
      allowMuting: false,
      allowPlaybackSpeedChanging: true,
      allowFullScreen: false,
      showControlsOnInitialize: false,
      customControls: MaterialControls(),
      // Enforcing landscape mode
      aspectRatio: 16 / 9,
      // Setting the orientation to landscape
      deviceOrientationsAfterFullScreen: [
        DeviceOrientation.landscapeLeft,
        DeviceOrientation.landscapeRight,
      ],
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          Expanded(
            child: Center(
              child: _controller.value.isInitialized
                  ? Chewie(
                      controller: _chewieController,
                    )
                  : CircularProgressIndicator(),
            ),
          ),
          ElevatedButton(
            onPressed: () {
              _controller.pause();
              Navigator.push(
                context,
                MaterialPageRoute(
                  builder: (context) => Level2QuestionScreen(
                    onCorrectAnswer: () {
                      correctAnswersCount++;
                      if (correctAnswersCount == 4) {
                        Navigator.pop(context); // Pop the QuestionScreen
                        Navigator.push(
                          context,
                          MaterialPageRoute(
                            builder: (context) => ResultScreen(),
                          ),
                        );
                      }
                    },
                  ),
                ),
              );
            },
            child: Text('Answer Question'),
            style: ElevatedButton.styleFrom(
              primary: Color.fromARGB(255, 48, 173, 26),
              onPrimary: Colors.white,
            ),
          ),
        ],
      ),
    );
  }

  @override
  void dispose() {
    _controller.pause(); // Pause the video before disposing
    _controller.dispose();
    _chewieController.dispose();
    SystemChrome.setPreferredOrientations([
      DeviceOrientation.portraitUp,
      DeviceOrientation.portraitDown,
    ]); // Unlock orientation
    super.dispose();
  }
}

class Level2QuestionScreen extends StatefulWidget {
  final VoidCallback onCorrectAnswer;

  const Level2QuestionScreen({required this.onCorrectAnswer});

  @override
  _Level2QuestionScreenState createState() => _Level2QuestionScreenState();
}

class _Level2QuestionScreenState extends State<Level2QuestionScreen> {
  late List<String> questions;
  late Map<String, List<String>> questionImageMapping;
  int currentQuestionIndex = 0;
  late List<String> shuffledImages; // Add shuffled images list

  @override
  void initState() {
    super.initState();
    SystemChrome.setPreferredOrientations([
      DeviceOrientation.landscapeLeft,
      DeviceOrientation.landscapeRight,
    ]); // Lock orientation to landscape
    questions = [
      'Select the books',
      'Select the eraser',
      'Select the pen',
      'Select the glue'
    ];
    questionImageMapping = {
      'Select the books': [
        'books.png',
        'eraser.png',
        'pen.png',
        'glue.png',
        'scissors.png',
        'highlighter.png'
      ],
      'Select the eraser': [
        'eraser.png',
        'pen.png',
        'glue.png',
        'scissors.png',
        'highlighter.png',
        'books.png'
      ],
      'Select the pen': [
        'pen.png',
        'glue.png',
        'scissors.png',
        'highlighter.png',
        'books.png',
        'eraser.png'
      ],
      'Select the glue': [
        'glue.png',
        'scissors.png',
        'highlighter.png',
        'books.png',
        'eraser.png',
        'pen.png'
      ],
    };
    currentQuestionIndex = 0;
    shuffledImages =
        List.from(questionImageMapping[questions[currentQuestionIndex]]!)
          ..shuffle(); // Shuffle images for the first question
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Question Screen'),
        leading: IconButton(
          icon: Icon(Icons.arrow_back),
          onPressed: () {
            Navigator.pop(context); // Navigate back
          },
        ),
      ),
      body: OrientationBuilder(
        builder: (context, orientation) {
          SystemChrome.setPreferredOrientations([
            DeviceOrientation.landscapeLeft,
            DeviceOrientation.landscapeRight,
          ]); // Lock orientation to landscape
          return orientation == Orientation.landscape
              ? _buildLandscapeContent()
              : _buildPortraitContent();
        },
      ),
    );
  }

  Widget _buildLandscapeContent() {
    return Column(
      children: [
        Padding(
          padding: const EdgeInsets.all(0.0),
          child: Text(
            questions[currentQuestionIndex],
            style: TextStyle(
              fontSize: 25.0,
              fontWeight: FontWeight.bold,
            ),
          ),
        ),
        Expanded(
          child: GridView.count(
            crossAxisCount: 3,
            padding: EdgeInsets.all(20.0),
            mainAxisSpacing: 20.0,
            crossAxisSpacing: 2.0,
            childAspectRatio: 2.5,
            children: shuffledImages.map((imageName) {
              return AnimalImage(
                imageName: imageName,
                correctAnswer: imageName ==
                    questionImageMapping[questions[currentQuestionIndex]]![0],
                nextQuestion: moveToNextQuestion,
                onCorrectAnswer: widget.onCorrectAnswer,
              );
            }).toList(),
          ),
        ),
      ],
    );
  }

  Widget _buildPortraitContent() {
    return Center(
      child: Text(
        'Please rotate your device to landscape mode.',
        style: TextStyle(fontSize: 24.0),
      ),
    );
  }

  void moveToNextQuestion() {
    setState(() {
      if (currentQuestionIndex < questions.length - 1) {
        currentQuestionIndex++;
        shuffledImages =
            List.from(questionImageMapping[questions[currentQuestionIndex]]!)
              ..shuffle(); // Shuffle images for the next question
      } else {
        currentQuestionIndex = 0;
      }
    });
  }

  @override
  void dispose() {
    SystemChrome.setPreferredOrientations([
      DeviceOrientation.landscapeLeft,
      DeviceOrientation.landscapeRight,
    ]); // Lock orientation to landscape
    super.dispose();
  }
}

class Level3VideoScreen extends StatefulWidget {
  @override
  _Level3VideoScreenState createState() => _Level3VideoScreenState();
}

class _Level3VideoScreenState extends State<Level3VideoScreen> {
  late VideoPlayerController _controller;
  late ChewieController _chewieController;
  int correctAnswersCount = 0;

  @override
  void initState() {
    super.initState();
    SystemChrome.setPreferredOrientations([
      DeviceOrientation.landscapeLeft,
      DeviceOrientation.landscapeRight,
    ]); // Lock orientation to landscape

    _controller = VideoPlayerController.asset('game_assets/Level3_song.mp4')
      ..initialize().then((_) {
        setState(() {});
        _controller.play();
      });

    _chewieController = ChewieController(
      videoPlayerController: _controller,
      autoPlay: true,
      looping: false,
      allowMuting: false,
      allowPlaybackSpeedChanging: true,
      allowFullScreen: false,
      showControlsOnInitialize: false,
      customControls: MaterialControls(),
      // Enforcing landscape mode
      aspectRatio: 16 / 9,
      // Setting the orientation to landscape
      deviceOrientationsAfterFullScreen: [
        DeviceOrientation.landscapeLeft,
        DeviceOrientation.landscapeRight,
      ],
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          Expanded(
            child: Center(
              child: _controller.value.isInitialized
                  ? Chewie(
                      controller: _chewieController,
                    )
                  : CircularProgressIndicator(),
            ),
          ),
          ElevatedButton(
            onPressed: () {
              _controller.pause();
              Navigator.push(
                context,
                MaterialPageRoute(
                  builder: (context) => Level3QuestionScreen(
                    onCorrectAnswer: () {
                      correctAnswersCount++;
                      if (correctAnswersCount == 4) {
                        Navigator.pop(context); // Pop the QuestionScreen
                        Navigator.push(
                          context,
                          MaterialPageRoute(
                            builder: (context) => ResultScreen(),
                          ),
                        );
                      }
                    },
                  ),
                ),
              );
            },
            child: Text('Answer Question'),
            style: ElevatedButton.styleFrom(
              primary: Color.fromARGB(255, 48, 173, 26),
              onPrimary: Colors.white,
            ),
          ),
        ],
      ),
    );
  }

  @override
  void dispose() {
    _controller.pause(); // Pause the video before disposing
    _controller.dispose();
    _chewieController.dispose();
    SystemChrome.setPreferredOrientations([
      DeviceOrientation.portraitUp,
      DeviceOrientation.portraitDown,
    ]); // Unlock orientation
    super.dispose();
  }
}

class Level3QuestionScreen extends StatefulWidget {
  final VoidCallback onCorrectAnswer;

  const Level3QuestionScreen({required this.onCorrectAnswer});

  @override
  _Level3QuestionScreenState createState() => _Level3QuestionScreenState();
}

class _Level3QuestionScreenState extends State<Level3QuestionScreen> {
  late Map<String, List<String>> questionImageMap;
  late List<String> questions;
  int currentQuestionIndex = 0;
  late List<String> shuffledImages; // Add shuffled images list

  @override
  void initState() {
    super.initState();
    SystemChrome.setPreferredOrientations([
      DeviceOrientation.landscapeLeft,
      DeviceOrientation.landscapeRight,
    ]); // Lock orientation to landscape
    questionImageMap = {
      'Select the heart': [
        'heart.png',
        'square.png',
        'diamond.png',
        'circle.png',
        'star.png',
        'triangle.png'
      ],
      'Select the Square': [
        'square.png',
        'diamond.png',
        'triangle.png',
        'heart.png',
        'star.png',
        'circle.png'
      ],
      'Select the Circle': [
        'circle.png',
        'heart.png',
        'triangle.png',
        'square.png',
        'star.png',
        'diamond.png'
      ],
      'Select the Diamond': [
        'diamond.png',
        'triangle.png',
        'square.png',
        'star.png',
        'heart.png',
        'circle.png'
      ],
    };
    questions = questionImageMap.keys.toList();
    currentQuestionIndex = 0;
    shuffledImages =
        List.from(questionImageMap[questions[currentQuestionIndex]]!)
          ..shuffle(); // Shuffle images for the first question
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Question Screen'),
        leading: IconButton(
          icon: Icon(Icons.arrow_back),
          onPressed: () {
            Navigator.pop(context); // Navigate back
          },
        ),
      ),
      body: OrientationBuilder(
        builder: (context, orientation) {
          SystemChrome.setPreferredOrientations([
            DeviceOrientation.landscapeLeft,
            DeviceOrientation.landscapeRight,
          ]); // Lock orientation to landscape
          return orientation == Orientation.landscape
              ? _buildLandscapeContent()
              : _buildPortraitContent();
        },
      ),
    );
  }

  Widget _buildLandscapeContent() {
    return Column(
      children: [
        Padding(
          padding: const EdgeInsets.all(0.0),
          child: Text(
            questions[currentQuestionIndex],
            style: TextStyle(
              fontSize: 25.0,
              fontWeight: FontWeight.bold,
            ),
          ),
        ),
        Expanded(
          child: GridView.count(
            crossAxisCount: 3,
            padding: EdgeInsets.all(20.0),
            mainAxisSpacing: 20.0,
            crossAxisSpacing: 2.0,
            childAspectRatio: 2.5,
            children: shuffledImages.map((imageName) {
              return AnimalImage(
                imageName: imageName,
                correctAnswer: imageName ==
                    questionImageMap[questions[currentQuestionIndex]]![0],
                nextQuestion: moveToNextQuestion,
                onCorrectAnswer: widget.onCorrectAnswer,
              );
            }).toList(),
          ),
        ),
      ],
    );
  }

  Widget _buildPortraitContent() {
    return Center(
      child: Text(
        'Please rotate your device to landscape mode.',
        style: TextStyle(fontSize: 24.0),
      ),
    );
  }

  void moveToNextQuestion() {
    setState(() {
      if (currentQuestionIndex < questions.length - 1) {
        currentQuestionIndex++;
        shuffledImages =
            List.from(questionImageMap[questions[currentQuestionIndex]]!)
              ..shuffle(); // Shuffle images for the next question
      } else {
        currentQuestionIndex = 0;
      }
    });
  }

  @override
  void dispose() {
    SystemChrome.setPreferredOrientations([
      DeviceOrientation.landscapeLeft,
      DeviceOrientation.landscapeRight,
    ]); // Lock orientation to landscape
    super.dispose();
  }
}

class AnimalImage extends StatelessWidget {
  final String imageName;
  final bool correctAnswer;
  final Function nextQuestion;
  final VoidCallback onCorrectAnswer;

  const AnimalImage({
    Key? key,
    required this.imageName,
    required this.correctAnswer,
    required this.nextQuestion,
    required this.onCorrectAnswer,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        showDialog(
          context: context,
          builder: (BuildContext context) {
            return AlertDialog(
              title: Text('Result'),
              content: Text(
                correctAnswer ? 'You are correct!' : 'Try again.',
              ),
              actions: <Widget>[
                TextButton(
                  onPressed: () {
                    Navigator.of(context).pop();
                    if (correctAnswer) {
                      nextQuestion();
                      onCorrectAnswer(); // Notify parent about correct answer
                    }
                  },
                  child: Text('OK'),
                ),
              ],
            );
          },
        );
      },
      child: Container(
        margin: EdgeInsets.all(8.0),
        child: Image.asset(
          'game_assets/$imageName',
          width: 80.0,
          height: 80.0,
        ),
      ),
    );
  }
}

class ResultScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Result Screen'),
        leading: IconButton(
          icon: Icon(Icons.arrow_back),
          onPressed: () {
            Navigator.popUntil(
              context,
              ModalRoute.withName(Navigator.defaultRouteName),
            );
          },
        ),
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Center(
            child: Padding(
              padding:
                  EdgeInsets.only(top: 0.0), // Adjust the top padding as needed
              child: Image.asset(
                'game_assets/result.gif',
                width: 500, // Adjust the width as needed
                height: 250, // Adjust the height as needed
              ),
            ),
          ),
        ],
      ),
    );
  }
}
