flutter_application_1/lib/widgets/milestone_timeline_widget.dart

import 'package:flutter/cupertino.dart';
import 'package:flutter_gen/gen_l10n/app_localizations.dart';

class MilestoneTimeline extends StatelessWidget {
  final List<Map<String, dynamic>> milestones;
  final int totalInterest;

  const MilestoneTimeline({
    super.key,
    required this.milestones,
    required this.totalInterest,
  });

  @override
  Widget build(BuildContext context) {
    final localizations = AppLocalizations.of(context)!;

    return Row(
      children: [
        Expanded(
          child: Center(
            child: SingleChildScrollView(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: List.generate(milestones.length, (index) {
                  double milestoneValue = milestones[index]['value'];
                  String milestoneEmoji = milestones[index]['emoji'];
                  String milestoneText = milestones[index]['text'];
                  bool milestoneReached = totalInterest >= milestoneValue;

                  return Padding(
                    padding: const EdgeInsets.symmetric(vertical: 8.0),
                    child: Column(
                      children: [
                        if (index > 0)
                          Container(
                            height: 25,
                            width: 2,
                            color: milestoneReached ? CupertinoColors.systemGreen : CupertinoColors.black,
                          ),
                        Padding(
                          padding: const EdgeInsets.symmetric(vertical: 4.0),
                          child: Column(
                            children: [
                              Text(
                                milestoneEmoji,
                                style: const TextStyle(fontSize: 30),
                              ),
                              const SizedBox(height: 5),
                              Text(
                                milestoneText,
                                textAlign: TextAlign.center,
                              ),
                            ],
                          ),
                        ),
                        Padding(
                          padding: const EdgeInsets.symmetric(vertical: 4.0),
                          child: Icon(
                            milestoneReached ? CupertinoIcons.check_mark_circled_solid : CupertinoIcons.circle_fill,
                            size: 20,
                            color: milestoneReached ? CupertinoColors.systemGreen : CupertinoColors.black,
                          ),
                        ),
                      ],
                    ),
                  );
                }),
              ),
            ),
          ),
        ),
        Expanded(
          child: Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Container(
                  width: double.infinity,
                  padding: const EdgeInsets.all(16.0),
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(8.0),
                  ),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text(
                        totalInterest < milestones[0]['value'] ? localizations.what_you_cant_afford(localizations.amount(totalInterest)) : localizations.what_you_can_afford(localizations.amount(totalInterest)),
                        style: const TextStyle(fontWeight: FontWeight.bold),
                        textAlign: TextAlign.center,
                      ),
                      const SizedBox(height: 10),
                      Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          if (totalInterest >= milestones[0]['value']) ...[
                            _buildListItem(context, localizations.smartphone),
                          ],
                          if (totalInterest >= milestones[1]['value']) ...[
                            _buildListItem(context, localizations.ebike),
                          ],
                          if (totalInterest >= milestones[2]['value']) ...[
                            _buildListItem(context, localizations.world_tour),
                          ],
                          if (totalInterest >= milestones[3]['value']) ...[
                            _buildListItem(context, localizations.sports_car),
                          ],
                          if (totalInterest >= milestones[4]['value']) ...[
                            _buildListItem(context, localizations.single_family_house),
                          ],
                        ],
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ),
        ),
      ],
    );
  }

  Widget _buildListItem(BuildContext context, String text) {
    return Padding(
      padding: const EdgeInsets.symmetric(vertical: 8.0),
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          const Icon(
            CupertinoIcons.circle_fill,
            size: 12,
            color: CupertinoColors.black,
          ),
          const SizedBox(width: 8),
          Expanded(
            child: Text(
              text,
              textAlign: TextAlign.start,
              style: const TextStyle(fontWeight: FontWeight.bold),
            ),
          ),
        ],
      ),
    );
  }
}