import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:gap/gap.dart';
import 'package:tanami_app/core/styles/app_color.dart';
import 'package:tanami_app/core/styles/app_text.dart';
import 'package:tanami_app/shared/components/text_widget.dart';

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

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Container(
          clipBehavior: Clip.antiAlias,
          decoration: BoxDecoration(
            color: AppColor.plainWhite,
            borderRadius: BorderRadius.circular(22.0),
            boxShadow: const [
              BoxShadow(
                color: Color(0x14000000),
                blurRadius: 8,
                offset: Offset(-2, -2),
                spreadRadius: 0.50,
              ),
              BoxShadow(
                color: Color(0x3391978E),
                blurRadius: 8,
                offset: Offset(2, 2),
                spreadRadius: 4,
              )
            ],
          ),
          child: Column(
            children: [
              Padding(
                padding: const EdgeInsets.all(16.0),
                child: Row(
                  children: [
                    ClipRRect(
                      borderRadius: BorderRadius.circular(4),
                      child: Image.asset(
                        'assets/images/portfolio_screen/detailsbg.png',
                        width: 0.2.sw,
                        height: 0.2.sw,
                        fit: BoxFit.cover,
                      ),
                    ),
                    const Gap(16.0),
                    Expanded(
                        child: TextWidget().text17W700(
                      'Multi Family Residential',
                      clr: AppColor.plainBlack,
                    )),
                  ],
                ),
              ),
              Container(
                decoration: const ShapeDecoration(
                  color: AppColor.portfolioCardBgColor,
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.only(
                      bottomLeft: Radius.circular(22),
                      bottomRight: Radius.circular(22),
                    ),
                  ),
                ),
                child: const Column(
                  children: [
                    Padding(
                      padding: EdgeInsets.all(12.0),
                      child: Column(
                        children: [
                          InvestmentDetailRow(
                            label: AppText.investmentamount,
                            value: 'SAR 1,000',
                            subTitle: "\$ 267,00",
                          ),
                          SizedBox(height: 8.0),
                          InvestmentDetailRow(
                            label: AppText.paymentMethod,
                            value: 'Wallet',
                            subTitle: "",
                          ),
                          SizedBox(height: 8.0),
                          InvestmentDetailRow(
                            label: AppText.currentExchangeText,
                            value: 'SAR 1 = USD 0.27',
                            subTitle: "",
                          ),
                          SizedBox(height: 8.0),
                          InvestmentDetailRow(
                            label: '${AppText.totalDebitedAmountText}:',
                            value: 'SAR 1,000',
                            subTitle: "",
                          ),
                        ],
                      ),
                    )
                  ],
                ),
              )
            ],
          ),
        ),
      ],
    );
  }
}

class InvestmentDetailRow extends StatelessWidget {
  final String label;
  final String value;
  final String subTitle;

  const InvestmentDetailRow({
    super.key,
    required this.label,
    required this.value,
    required this.subTitle,
  });

  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        TextWidget().text14W500(
          label,
          clr: AppColor.investPaymentTextColor,
        ),
        Column(
          crossAxisAlignment: CrossAxisAlignment.end,
          children: [
            TextWidget().text14W700(
              value,
              clr: AppColor.plainBlack,
            ),
            TextWidget().text11W400(
              subTitle,
              clr: AppColor.plainBlack,
            ),
          ],
        ),
      ],
    );
  }
}
