import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:ride/views/widgets/elevated_btn.dart';

import '../../../constant/colors.dart';
import '../../../constant/style.dart';
import '../../../controller/home/map_page_controller.dart';

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

  @override
  Widget build(BuildContext context) {
    return GetBuilder<MapController>(
        builder: (controller) => Positioned(
              right: 5,
              bottom: 5,
              left: 5,
              child: AnimatedContainer(
                duration: const Duration(milliseconds: 400),
                height: controller.paymentPageShown,
                decoration: BoxDecoration(
                    color: AppColor.secondaryColor,
                    borderRadius: BorderRadius.circular(15)),
                child: Padding(
                  padding: const EdgeInsets.symmetric(horizontal: 20),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [
                          Text(
                            'My Cared'.tr,
                            style: AppStyle.title.copyWith(fontSize: 22),
                          ),
                          IconButton(
                            onPressed: () =>
                                controller.changePaymentMethodPageShown(),
                            icon: const Icon(Icons.close),
                          ),
                        ],
                      ),
                      Text(
                        'Add Card'.tr,
                        style: AppStyle.title,
                      ),
                      const SizedBox(
                        height: 10,
                      ),
                      Container(
                        height: Get.height * .3,
                        decoration: const BoxDecoration(
                            color: AppColor.secondaryColor,
                            borderRadius: BorderRadius.all(Radius.circular(15)),
                            boxShadow: [
                              BoxShadow(
                                  spreadRadius: 3,
                                  offset: Offset(3, 3),
                                  blurRadius: 3,
                                  color: AppColor.redColor),
                              BoxShadow(
                                  offset: Offset(-3, -3),
                                  blurRadius: 3,
                                  spreadRadius: 3,
                                  color: AppColor.redColor)
                            ]),
                      ),
                      const Spacer(),
                      Row(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: [
                          MyElevatedButton(
                            title: 'Add Credit Card',
                            onPressed: () {},
                          ),
                        ],
                      )
                    ],
                  ),
                ),
              ),
            ));
  }
}