/// Payment Method Section Widget
///
/// Payment method selection (Bank Transfer or COD).
library;

import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:worker/core/constants/ui_constants.dart';
import 'package:worker/core/theme/colors.dart';

/// Payment Method Section
///
/// Allows user to select payment method between bank transfer and COD.
class PaymentMethodSection extends HookWidget {
  final ValueNotifier<String> paymentMethod;

  const PaymentMethodSection({super.key, required this.paymentMethod});

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: const EdgeInsets.symmetric(horizontal: AppSpacing.md),
      padding: const EdgeInsets.all(AppSpacing.md),
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(AppRadius.card),
        boxShadow: [
          BoxShadow(
            color: Colors.black.withValues(alpha: 0.05),
            blurRadius: 8,
            offset: const Offset(0, 2),
          ),
        ],
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          // Section Title
          const Text(
            'Phương thức thanh toán',
            style: TextStyle(
              fontSize: 18,
              fontWeight: FontWeight.bold,
              color: Color(0xFF212121),
            ),
          ),

          const SizedBox(height: AppSpacing.md),

          // Bank Transfer Option
          InkWell(
            onTap: () => paymentMethod.value = 'bank_transfer',
            child: Padding(
              padding: const EdgeInsets.symmetric(vertical: 8),
              child: Row(
                children: [
                  Radio<String>(
                    value: 'bank_transfer',
                    groupValue: paymentMethod.value,
                    onChanged: (value) {
                      paymentMethod.value = value!;
                    },
                    activeColor: AppColors.primaryBlue,
                  ),
                  const Expanded(
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Text(
                          'Chuyển khoản ngân hàng',
                          style: TextStyle(
                            fontSize: 15,
                            fontWeight: FontWeight.w500,
                          ),
                        ),
                        SizedBox(height: 4),
                        Text(
                          'Thanh toán qua chuyển khoản',
                          style: TextStyle(
                            fontSize: 13,
                            color: AppColors.grey500,
                          ),
                        ),
                      ],
                    ),
                  ),
                ],
              ),
            ),
          ),

          const Divider(height: 1),

          // COD Option
          InkWell(
            onTap: () => paymentMethod.value = 'cod',
            child: Padding(
              padding: const EdgeInsets.symmetric(vertical: 8),
              child: Row(
                children: [
                  Radio<String>(
                    value: 'cod',
                    groupValue: paymentMethod.value,
                    onChanged: (value) {
                      paymentMethod.value = value!;
                    },
                    activeColor: AppColors.primaryBlue,
                  ),
                  const Expanded(
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Text(
                          'Thanh toán khi nhận hàng (COD)',
                          style: TextStyle(
                            fontSize: 15,
                            fontWeight: FontWeight.w500,
                          ),
                        ),
                        SizedBox(height: 4),
                        Text(
                          'Thanh toán bằng tiền mặt khi nhận hàng',
                          style: TextStyle(
                            fontSize: 13,
                            color: AppColors.grey500,
                          ),
                        ),
                      ],
                    ),
                  ),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }
}