import 'package:flutter/material.dart';
import 'package:hoshan/ui/theme/colors.dart';
import 'package:hoshan/ui/theme/text.dart';
import 'package:hoshan/ui/widgets/components/button/loading_button.dart';
import 'package:hoshan/ui/widgets/sections/loading/default_placeholder.dart';

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

  @override
  State<PurchaseCardPlaceholder> createState() =>
      _PurchaseCardPlaceholderState();
}

class _PurchaseCardPlaceholderState extends State<PurchaseCardPlaceholder> {
  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(16.0),
      child: Container(
        padding: const EdgeInsets.all(16),
        decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(16),
            color: Theme.of(context).colorScheme.surface),
        child: Column(
          children: [
            DefaultPlaceHolder(
              child: Container(
                width: 94,
                height: 94,
                padding: const EdgeInsets.all(12),
                decoration: BoxDecoration(
                    color: AppColors.secondryColor[50], shape: BoxShape.circle),
              ),
            ),
            const SizedBox(
              height: 8,
            ),
            DefaultPlaceHolder(
              child: Container(
                decoration: BoxDecoration(
                    color: Colors.white,
                    borderRadius: BorderRadius.circular(16)),
                child: Text(
                  'widget.plan.title',
                  style: AppTextStyles.headline5
                      .copyWith(color: Theme.of(context).colorScheme.onSurface),
                ),
              ),
            ),
            const SizedBox(
              height: 8,
            ),
            Column(
              children: [
                DefaultPlaceHolder(
                  child: Container(
                    decoration: BoxDecoration(
                        color: Colors.white,
                        borderRadius: BorderRadius.circular(16)),
                    child: Text(
                      '500 سکه هوشان + 500 سکه رایگان',
                      style: AppTextStyles.body4.copyWith(
                          color: Theme.of(context).colorScheme.onSurface),
                      textAlign: TextAlign.center,
                      textDirection: TextDirection.rtl,
                    ),
                  ),
                ),
                const SizedBox(
                  height: 32,
                ),
                Padding(
                  padding: const EdgeInsets.symmetric(horizontal: 16.0),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.end,
                    textDirection: TextDirection.rtl,
                    children: [
                      Row(
                        mainAxisAlignment: MainAxisAlignment.end,
                        children: [
                          DefaultPlaceHolder(
                            child: Container(
                              decoration: BoxDecoration(
                                  color: Colors.white,
                                  borderRadius: BorderRadius.circular(16)),
                              child: Text(':مبلغ قابل پرداخت',
                                  style: AppTextStyles.body3.copyWith(
                                      color: Theme.of(context)
                                          .colorScheme
                                          .primary)),
                            ),
                          ),
                        ],
                      ),
                      Row(
                        children: [
                          DefaultPlaceHolder(
                            child: Container(
                              decoration: BoxDecoration(
                                  color: Colors.white,
                                  borderRadius: BorderRadius.circular(16)),
                              child: Text('50000 تومان',
                                  style: AppTextStyles.body4.copyWith(
                                      color: AppColors.green.defaultShade)),
                            ),
                          ),
                        ],
                      )
                    ],
                  ),
                ),
                const SizedBox(
                  height: 32,
                ),
                DefaultPlaceHolder(
                  child: Container(
                    width: double.infinity,
                    decoration: BoxDecoration(
                        color: Colors.white,
                        borderRadius: BorderRadius.circular(16)),
                    child: Text(
                      'کد تخفیف دارید؟ اینجا کلیک کنید.',
                      textDirection: TextDirection.rtl,
                      style: AppTextStyles.body4.copyWith(
                          fontWeight: FontWeight.bold,
                          color: Theme.of(context).colorScheme.primary),
                    ),
                  ),
                ),
                Padding(
                  padding: const EdgeInsets.symmetric(vertical: 16.0),
                  child: LoadingButton(
                      loading: true,
                      radius: 360,
                      color: AppColors.gray[800],
                      width: MediaQuery.sizeOf(context).width,
                      child: Text(
                        'خرید',
                        style:
                            AppTextStyles.body4.copyWith(color: Colors.white),
                      )),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}