import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:tanami_app/core/styles/app_images.dart';
import 'package:tanami_app/core/styles/app_text.dart';
import 'package:tanami_app/shared/components/text_widget.dart';

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

  @override
  State<KYCScreen> createState() => _KYCScreenState();
}

class _KYCScreenState extends State<KYCScreen> {
  List data = [
    'Verify your identity',
    'Take a selfie',
    'Upload a proof of address',
    'Confirm your risk profile and sign agreement',
  ];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(
        automaticallyImplyLeading: false,
        actions: [
          IconButton(
            onPressed: () {},
            icon: const Icon(
              Icons.close_sharp,
              size: 30.0,
            ),
          ),
        ],
      ),
      body: Center(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            SvgPicture.asset(
              AppImages.welcomeLogo,
            ),
            SizedBox(
              height: 24.h,
            ),
            Text(
              'Almost here...',
              style: GoogleFonts.dmSans(
                color: const Color(0xFF363636),
                fontSize: 17.sp,
                fontWeight: FontWeight.w700,
              ),
            ),
            SizedBox(
              height: 8.h,
            ),
            SizedBox(
              width: 280.w,
              child: Text(
                'Complete account profile in 3 minutes to start investing',
                textAlign: TextAlign.center,
                style: GoogleFonts.dmSans(
                  color: const Color(0xFF8D8D8D),
                  fontSize: 14.sp,
                  fontWeight: FontWeight.w700,
                ),
              ),
            ),
            SizedBox(
              height: 40.h,
            ),
            Padding(
              padding: const EdgeInsets.symmetric(horizontal: 50.0),
              child: ListView.builder(
                physics: const NeverScrollableScrollPhysics(),
                shrinkWrap: true,
                itemCount: data.length,
                itemBuilder: (context, index) {
                  return Padding(
                    padding: const EdgeInsets.symmetric(vertical: 10.0),
                    child: Row(
                      children: [
                        Image.asset(
                          'assets/images/wallet_screen/${index + 1}.png',
                          height: 45.h,
                        ),
                        SizedBox(
                          width: 12.w,
                        ),
                        Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            Text(
                              'Step ${index + 1}',
                              textAlign: TextAlign.center,
                              style: GoogleFonts.dmSans(
                                color: const Color(0xFF363636),
                                fontSize: 14.sp,
                                fontWeight: FontWeight.w700,
                              ),
                            ),
                            SizedBox(
                              width: 10.h,
                            ),
                            SizedBox(
                              width: 230.w,
                              child: Text(
                                data[index],
                                style: GoogleFonts.dmSans(
                                  color: const Color(0xFF363636),
                                  fontSize: 14.sp,
                                  fontWeight: FontWeight.w400,
                                ),
                              ),
                            ),
                          ],
                        )
                      ],
                    ),
                  );
                },
              ),
            ),
            SizedBox(
              height: 70.h,
            ),
            GestureDetector(
              onTap: () {
                // goRouter.pushNamed(RouteName.otpScreen, pathParameters: {
                //   "fromScreen": 'withdrawal',
                // });
              },
              child: Container(
                margin: const EdgeInsets.all(12.0),
                height: 56.h,
                width: double.infinity,
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(22.r),
                  color: const Color(0xFF004717),
                ),
                child: Padding(
                  padding: const EdgeInsets.symmetric(vertical: 20.0),
                  child: Center(
                    child: Text(
                      AppText.cont,
                      style: GoogleFonts.dmSans(
                        color: Colors.white,
                        fontSize: 14.sp,
                        fontWeight: FontWeight.w700,
                      ),
                    ),
                  ),
                ),
              ),
            ),
            SizedBox(
              height: 10.h,
            ),
            TextWidget().text14W700(
              AppText.later,
              clr: const Color(0xFF363636),
              textDecoration: TextDecoration.underline,
            )
          ],
        ),
      ),
    );
  }
}
