import 'package:flutter/material.dart';
import 'package:styled_text/styled_text.dart';

import '../../../size_config.dart';
import '../../../theme.dart';

class PaymentInstructionGopay extends StatelessWidget {
  final TextStyle baris = thirdTextStyle.copyWith(
    fontFamily: "Poppins",
    fontSize: getProportionateScreenWidth(14),
  );
  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        color: Theme.of(context).colorScheme.primaryContainer,
        borderRadius: BorderRadius.circular(8),
        boxShadow: [
          BoxShadow(
            color: Colors.black.withOpacity(0.1),
            spreadRadius: 0,
            blurRadius: 4,
            offset: Offset(0, 2),
          ),
        ],
      ),
      margin: EdgeInsets.only(
          left: getProportionateScreenWidth(2),
          right: getProportionateScreenWidth(2)),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Container(
            padding: EdgeInsets.symmetric(
              vertical: getProportionateScreenHeight(15),
              horizontal: getProportionateScreenWidth(16),
            ),
            child: Text(
              'Cara Pembayaran',
              style: thirdTextStyle.copyWith(
                fontWeight: semiBold,
                fontSize: getProportionateScreenWidth(14),
              ),
            ),
          ),
          Container(
            padding: EdgeInsets.symmetric(
                horizontal: getProportionateScreenWidth(16)),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                StyledText(
                  text:
                      '1. Buka aplikasi <bold>Gojek</bold> atau <bold>e-Wallet</bold> apapun milik anda',
                  style: baris,
                  tags: {
                    'bold': StyledTextTag(style: TextStyle(fontWeight: bold)),
                  },
                ),
                SizedBox(height: getProportionateScreenHeight(15)),
                StyledText(
                  text:
                      '2. Scan <bold>QR Code</bold> yang tertera dan masukkan nominal sesuai tagihan transaksi',
                  style: baris,
                  tags: {
                    'bold': StyledTextTag(style: TextStyle(fontWeight: bold)),
                  },
                ),
                SizedBox(height: getProportionateScreenHeight(15)),
                StyledText(
                  text:
                      '3. Periksa detail transaksi Anda pada aplikasi, lalu tap tombol Bayar.',
                  style: baris,
                  tags: {
                    'bold': StyledTextTag(style: TextStyle(fontWeight: bold)),
                  },
                ),
                SizedBox(height: getProportionateScreenHeight(15)),
                StyledText(
                  text: '4. Masukkan pin Anda',
                  style: baris,
                  tags: {
                    'bold': StyledTextTag(style: TextStyle(fontWeight: bold)),
                  },
                ),
                SizedBox(height: getProportionateScreenHeight(15)),
                StyledText(
                  text: '5. Transaksi Anda telah selesai',
                  style: baris,
                  tags: {
                    'bold': StyledTextTag(style: TextStyle(fontWeight: bold)),
                  },
                ),
                SizedBox(height: getProportionateScreenHeight(15)),
              ],
            ),
          ),
        ],
      ),
    );
  }
}