content: import 'package:expenz/models/expence_model.dart';
  import 'package:expenz/services/user_details_service.dart';
  import 'package:expenz/utils/colors.dart';
  import 'package:expenz/utils/constants.dart';
  import 'package:expenz/widgets/expence_card.dart';
  import 'package:expenz/widgets/income_exp_chip.dart';
  import 'package:expenz/widgets/line_chart.dart';
  import 'package:flutter/material.dart';
  
  class HomeScreen extends StatefulWidget {
    final List<Expense> expensesList;
    const HomeScreen({
      super.key,
      required this.expensesList,
    });
  
    @override
    State<HomeScreen> createState() => _HomeScreenState();
  }
  
  class _HomeScreenState extends State<HomeScreen> {
    String username = "";
    String email = "";
  
    @override
    void initState() {
      //get the user details from the shared preferences
      UserService.getUserDetails().then((value) {
        //check if the user details are not null
        if (value['username'] != null && value['email'] != null) {
          //set the username and email to the state
          setState(() {
            username = value['username']!;
            email = value['email']!;
          });
        }
      });
      super.initState();
    }
  
    @override
    Widget build(BuildContext context) {
      return Scaffold(
        body: SafeArea(
          child: SingleChildScrollView(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Container(
                  height: MediaQuery.of(context).size.width * 0.6,
                  decoration: BoxDecoration(
                    color: kMainColor.withOpacity(0.15),
                    borderRadius: const BorderRadius.only(
                      bottomLeft: Radius.circular(30),
                      bottomRight: Radius.circular(30),
                    ),
                  ),
                  child: Padding(
                    padding: const EdgeInsets.all(kDefalutPadding),
                    child: Column(
                      children: [
                        Row(
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          children: [
                            Container(
                              decoration: BoxDecoration(
                                borderRadius: BorderRadius.circular(100),
                                color: kMainColor,
                                border: Border.all(
                                  color: kMainColor,
                                  width: 3,
                                ),
                              ),
                              child: ClipRRect(
                                borderRadius: BorderRadius.circular(100),
                                child: Image.asset(
                                  "assets/images/user.jpg",
                                  width: 50,
                                  fit: BoxFit.cover,
                                ),
                              ),
                            ),
                            Text(
                              "Welcome $username",
                              style: const TextStyle(
                                fontSize: 18,
                                fontWeight: FontWeight.w500,
                              ),
                            ),
                            const SizedBox(
                              width: 20,
                            ),
                            IconButton(
                              onPressed: () {},
                              icon: const Icon(
                                Icons.notifications,
                                color: kMainColor,
                                size: 30,
                              ),
                            ),
                          ],
                        ),
                        const SizedBox(
                          height: 20,
                        ),
                        const Row(
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          children: [
                            IncomeExpenceChip(
                              title: "Income",
                              amount: 5000,
                              bgColor: kGreen,
                              imageUrl: "assets/images/income.png",
                            ),
                            IncomeExpenceChip(
                              title: "Expense",
                              amount: 1200,
                              bgColor: kRed,
                              imageUrl: "assets/images/expense.png",
                            )
                          ],
                        ),
                      ],
                    ),
                  ),
                ),
  
                //spend frequency
  
                const Padding(
                  padding: EdgeInsets.all(kDefalutPadding),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text(
                        "Spend Frequency",
                        style: TextStyle(
                          fontSize: 18,
                          fontWeight: FontWeight.w500,
                        ),
                      ),
                      SizedBox(
                        height: 20,
                      ),
  
                      //chart to show the spend frequency and the amount spent in a chart using fl_chart
  
                      LineChartSample()
                    ],
                  ),
                ),
  
                //recent transactions
                Padding(
                  padding:
                      const EdgeInsets.symmetric(horizontal: kDefalutPadding),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      const Text(
                        "Recent Transactions",
                        style: TextStyle(
                          fontSize: 18,
                          fontWeight: FontWeight.w500,
                        ),
                      ),
                      const SizedBox(
                        height: 20,
                      ),
                      //show the recent transactions
                      Column(
                        // Wrap with Column to ensure proper layout
                        children: [
                          widget.expensesList.isEmpty
                              ? const Text(
                                  "No expenses added yet, add some expenses to see here",
                                  style: TextStyle(
                                    fontSize: 16,
                                    color: kGrey,
                                  ),
                                )
                              : ListView.builder(
                                  shrinkWrap:
                                      true, // Set shrinkWrap to true to allow the ListView to adapt to its content size
                                  scrollDirection: Axis.vertical,
                                  physics: const NeverScrollableScrollPhysics(),
                                  itemCount: widget.expensesList.length,
                                  itemBuilder: (context, index) {
                                    final expense = widget.expensesList[index];
                                    return ExpenceCard(
                                      title: expense.title,
                                      date: expense.date,
                                      amount: expense.amount,
                                      category: expense.category,
                                      description: expense.description,
                                      createdAt: expense.time,
                                    );
                                  },
                                ),
                        ],
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ),
        ),
      );
    }
  }
  