import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:traderscircuit/Utils/Common/CommonAppbar.dart';
import 'package:traderscircuit/Utils/Common/sized_box.dart';
import 'package:traderscircuit/Utils/text.dart';

class NotificationScreen extends StatefulWidget {
  const NotificationScreen({super.key});

  @override
  State<NotificationScreen> createState() => _NotificationScreenState();
}

class _NotificationScreenState extends State<NotificationScreen> {
  List<Map<String, String>> CardList = [
    {
      'profileimg': 'assets/images/png/Ellipse 588.png',
      'title': 'Mokshada Kesarkar',
      'subtitle': 'Lorem ipsum dolor sit amet cons......',
      'time': '1 day ago'
    },
    {
      'profileimg': 'assets/images/png/Ellipse 591.png',
      'title': 'Afrid Mulla',
      'subtitle': 'Lorem ipsum dolor sit amet cons......',
      'time': '1 day ago'
    },
    {
      'profileimg': 'assets/images/png/Ellipse 588.png',
      'title': 'Mokshada Kesarkar',
      'subtitle': 'Lorem ipsum dolor sit amet cons......',
      'time': '2 days ago'
    },
    {
      'profileimg': 'assets/images/png/Ellipse 591.png',
      'title': 'Afrid Mulla',
      'subtitle': 'Lorem ipsum dolor sit amet cons......',
      'time': '3 days ago'
    },
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.black,
      appBar: CommonAppbar(titleTxt: ''),
      body: SingleChildScrollView(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Padding(
              padding: EdgeInsets.only(left: 16.w),
              child: text25W600('Notifications'),
            ),
            sizedBoxHeight(40.h),
            Padding(
              padding: EdgeInsets.only(left: 16.w),
              child: text16W400('Today'),
            ),
            sizedBoxHeight(25.h),
            notificationCard(
                profileimg: 'assets/images/png/Ellipse 591.png',
                title: 'Mokshada Kesarkar',
                subtitle: 'Lorem ipsum dolor sit amet cons......',
                time: '30 mins ago'),
            Container(
              height: 1,
              margin: EdgeInsets.symmetric(vertical: 20.h),
              decoration: BoxDecoration(
                border: Border(
                  bottom: BorderSide(
                    color: Color.fromRGBO(176, 176, 176, 0.5),
                    width: 1,
                  ),
                ),
              ),
            ),
            notificationCard(
                profileimg: 'assets/images/png/Ellipse 588.png',
                title: 'Mokshada Kesarkar',
                subtitle: 'Lorem ipsum dolor sit amet cons......',
                time: '1 Hour ago'),
            sizedBoxHeight(30.h),
            Padding(
              padding: EdgeInsets.only(left: 16.w),
              child: text16W400('Yesterday'),
            ),
            sizedBoxHeight(30.h),
            ListView.builder(
              shrinkWrap: true,
              itemCount: CardList.length,
              itemBuilder: (context, index) {
                return Column(
                  children: [
                    notificationCard(
                        profileimg: CardList[index]['profileimg']!,
                        title: CardList[index]['title']!,
                        subtitle: CardList[index]['subtitle']!,
                        time: CardList[index]['time']!),
                    if (index != CardList.length - 1)
                      Container(
                        height: 1,
                        margin: EdgeInsets.symmetric(vertical: 20.h),
                        decoration: BoxDecoration(
                          border: Border(
                            bottom: BorderSide(
                              color: Color.fromRGBO(176, 176, 176, 0.5),
                              width: 1,
                            ),
                          ),
                        ),
                      ),
                  ],
                );
              },
            ),
            sizedBoxHeight(40.h),
          ],
        ),
      ),
    );
  }

// 'assets/images/png/Ellipse 1494.png'
  Widget notificationCard({
    required String profileimg,
    required String title,
    required String subtitle,
    required String time,
  }) {
    return Padding(
      padding: EdgeInsets.symmetric(horizontal: 12.w),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Row(
            children: [
              CircleAvatar(
                backgroundImage: AssetImage(profileimg),
                radius: 26.5.r,
              ),
              sizedBoxWidth(12.w),
              Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  text14W400(title),
                  text12W500_B4B4B4(subtitle),
                ],
              ),
            ],
          ),
          text12W500(time),
        ],
      ),
    );
  }
}