import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:sefer_driver/views/widgets/my_scafold.dart';

// 1. إنشاء Class لتمثيل بيانات كل سؤال وجواب
class FaqItem {
  final String question;
  final Widget answer; // استخدام Widget يسمح بوضع نصوص أو صور
  final IconData icon;

  FaqItem({required this.question, required this.answer, required this.icon});
}

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

  @override
  Widget build(BuildContext context) {
    // 2. تجهيز قائمة البيانات بشكل منظم
    final List<FaqItem> faqItems = [
      FaqItem(
        question: "What are the order details we provide to you?".tr,
        icon: Icons.receipt_long_outlined,
        answer: Padding(
          padding: const EdgeInsets.all(8.0),
          child: Image.network(
            'https://api.tripz-egypt.com/tripz/imageForUsingApp/order_page.jpg',
            fit: BoxFit.cover,
            // يمكنك إضافة مؤشر تحميل هنا
            loadingBuilder: (context, child, loadingProgress) {
              if (loadingProgress == null) return child;
              return const Center(child: CircularProgressIndicator());
            },
            errorBuilder: (context, error, stackTrace) {
              return const Center(
                  child:
                      Icon(Icons.error_outline, color: Colors.red, size: 40));
            },
          ),
        ),
      ),
      FaqItem(
        question: "What is the feature of our wallet?".tr,
        icon: Icons.account_balance_wallet_outlined,
        answer: Text(
          '''Intaleq Wallet Features:

- Transfer money multiple times.
- Transfer to anyone.
- Make purchases.
- Charge your account.
- Charge a friend's Intaleq account.
- Store your money with us and receive it in your bank as a monthly salary.'''
              .tr,
          style:
              TextStyle(fontSize: 15, height: 1.5, color: Colors.grey.shade700),
        ),
      ),
      FaqItem(
        question: "What is Types of Trips in Intaleq?".tr,
        icon: Icons.map_outlined,
        answer: Text(
          '''Types of Trips in Intaleq:

- Comfort: For cars newer than 2017 with air conditioning.
- Lady: For girl drivers.
- Speed: For fixed salary and endpoints.
- Mashwari: For flexible trips where passengers choose the car and driver with prior arrangements.
- Raih Gai: For same-day return trips longer than 50km.'''
              .tr,
          style:
              TextStyle(fontSize: 15, height: 1.5, color: Colors.grey.shade700),
        ),
      ),
    ];

    // 3. بناء الواجهة الرسومية باستخدام البيانات
    return MyScafolld(
      title: "How to use App".tr, // تم تغيير العنوان ليكون أعم
      isleading: true,
      body: [
        ListView.separated(
          padding: const EdgeInsets.symmetric(horizontal: 16.0, vertical: 20.0),
          itemCount: faqItems.length,
          separatorBuilder: (context, index) => const SizedBox(height: 12),
          itemBuilder: (context, index) {
            final item = faqItems[index];
            return Card(
              elevation: 2,
              shadowColor: Colors.black.withOpacity(0.1),
              shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(16)),
              clipBehavior: Clip.antiAlias,
              child: ExpansionTile(
                leading: Icon(item.icon, color: Theme.of(context).primaryColor),
                title: Text(item.question,
                    style: const TextStyle(fontWeight: FontWeight.w600)),
                childrenPadding: const EdgeInsets.fromLTRB(16, 0, 16, 16),
                expandedCrossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  const Divider(height: 1),
                  const SizedBox(height: 12),
                  item.answer,
                ],
              ),
            );
          },
        ),
      ],
    );
  }
}