import 'package:flutter/material.dart';
import 'package:tour_travel_agr/helper/components_widget/custom_appbar.dart';
import 'package:tour_travel_agr/resource/assets.dart';
import 'package:tour_travel_agr/resource/colors.dart';
import 'package:tour_travel_agr/resource/font.dart';
import 'package:tour_travel_agr/resource/size.dart';
import 'package:tour_travel_agr/resource/style.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: ColorManager.backgroundColor,
      body: Container(
        padding: EdgeInsets.only(
          top: AppPadding.safeAreaTop(context),
          left: AppPadding.p20,
          right: AppPadding.p20,
          bottom: AppPadding.safeAreaBot(context),
        ),
        child: Column(
          children: [
            const CustomAppBar(text: "Reimbursement"),
            Column(
              mainAxisSize: MainAxisSize.max,
              children: [
                Container(
                  margin: EdgeInsets.only(
                    top: AppMargin.m16,
                  ),
                  padding: EdgeInsets.only(
                    left: AppPadding.p20,
                  ),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Text(
                        "24 Maret 2023",
                        style: getSemiBoldStyle(
                          color: Colors.black,
                          fontFamily: FontConstants.openSans,
                        ),
                      ),
                      Image(
                        image: AssetImage(
                          Assets.calenderIcon,
                        ),
                      )
                    ],
                  ),
                ),
              ],
            ),
            const SizedBox(
              height: 12,
            ),
            Expanded(
              child: ListView.builder(
                padding: EdgeInsets.zero,
                itemCount: 10,
                itemBuilder: (c, index) {
                  return const ListTransaction();
                },
              ),
            ),
          ],
        ),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: const EdgeInsets.only(
        bottom: 12,
      ),
      padding: EdgeInsets.all(
        AppPadding.p12,
      ),
      height: 102,
      width: double.infinity,
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(
          12,
        ),
        border: Border.all(
          width: 0.5,
          color: Colors.grey.withOpacity(
            0.25,
          ),
        ),
        color: Colors.white,
        boxShadow: [
          BoxShadow(
            color: Colors.grey.withOpacity(0.3),
            blurRadius: 2,
            offset: const Offset(5, 5),
          ),
        ],
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Row(
            children: [
              const Spacer(),
              Text(
                "24 Maret 2023",
                style: getRegularStyle(
                  color: ColorManager.grey,
                  fontFamily: FontConstants.openSans,
                  fontSize: FontSize.s12,
                ),
              )
            ],
          ),
          Row(
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              Container(
                width: 40,
                height: 40,
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(
                    100,
                  ),
                  color: ColorManager.pink,
                ),
                child: Center(
                  child: Image(
                    width: 20,
                    height: 20,
                    image: AssetImage(
                      Assets.transactionIcon,
                    ),
                  ),
                ),
              ),
              Container(
                margin: EdgeInsets.only(
                  left: AppMargin.m16,
                ),
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(
                      "15 Transaksi",
                      style: getBoldStyle(
                        color: Colors.black,
                        fontFamily: FontConstants.mulish,
                        fontSize: 18,
                      ),
                    ),
                    Text(
                      "Rp 320.000",
                      style: getSemiBoldStyle(
                        color: ColorManager.primary,
                        fontFamily: FontConstants.openSans,
                      ),
                    ),
                  ],
                ),
              )
            ],
          )
        ],
      ),
    );
  }
}
