import 'package:flutter/material.dart';
import '../ui_colors.dart';
import '../ui_constants.dart';
import '../ui_icons.dart';

/// A widget that displays a horizontal step indicator with icons.
///
/// This widget shows a series of circular step indicators connected by lines,
/// with different visual states for completed, active, and inactive steps.
class UiStepIndicator extends StatelessWidget {
  /// The list of icons to display for each step.
  final List<IconData> stepIcons;

  /// The index of the currently active step (0-based).
  final int currentStep;

  /// Creates a [UiStepIndicator].
  const UiStepIndicator({
    super.key,
    required this.stepIcons,
    required this.currentStep,
  });

  @override
  /// Builds the step indicator UI.
  Widget build(BuildContext context) {
    // active step color
    const Color activeColor = UiColors.primary;
    // completed step color
    const Color completedColor = UiColors.textSuccess;
    // inactive step color
    const Color inactiveColor = UiColors.iconSecondary;

    return Padding(
      padding: const EdgeInsets.symmetric(vertical: UiConstants.space2),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: List.generate(stepIcons.length, (int index) {
          final bool isActive = index == currentStep;
          final bool isCompleted = index < currentStep;

          Color bgColor;
          Color iconColor;
          if (isCompleted) {
            bgColor = completedColor.withAlpha(24);
            iconColor = completedColor;
          } else if (isActive) {
            bgColor = activeColor.withAlpha(24);
            iconColor = activeColor;
          } else {
            bgColor = inactiveColor.withAlpha(24);
            iconColor = inactiveColor.withAlpha(128);
          }

          return Row(
            children: <Widget>[
              Container(
                width: 40,
                height: 40,
                decoration: BoxDecoration(
                  color: bgColor,
                  shape: BoxShape.circle,
                ),
                child: Icon(
                  isCompleted ? UiIcons.check : stepIcons[index],
                  size: 20,
                  color: iconColor,
                ),
              ),
              if (index < stepIcons.length - 1)
                Container(
                  width: 30,
                  height: 2,
                  margin: const EdgeInsets.symmetric(
                    horizontal: UiConstants.space1,
                  ),
                  color: isCompleted
                      ? completedColor.withAlpha(96)
                      : inactiveColor.withAlpha(96),
                ),
            ],
          );
        }),
      ),
    );
  }
}
