import 'package:flutter/material.dart';
import 'package:hmg_patient_app_new/core/app_export.dart';
import 'package:hmg_patient_app_new/theme/colors.dart';

class StepperWidget extends StatelessWidget {

  double width = 80.w;
  Color activeColor = AppColors.primaryRedColor;
  bool hasThumb = true;
  double? height = 4.h;
   StepperWidget( this.width,  this.activeColor,  this.hasThumb, this.height, {super.key});

  @override
  Widget build(BuildContext context) {
    return oneProgressBar(context, width, activeColor, hasThumb);
  }

  Widget oneProgressBar(BuildContext context, double width, Color color, bool hasThumb) {
    final isRtl = Directionality.of(context) == TextDirection.rtl;
    return Row(
      children: [
        AnimatedSize(
          duration: const Duration(seconds: 1),
          child: SizedBox(
            height: 28.h,
            width: width,
            child: Stack(
              clipBehavior: Clip.none,
              children: [
                SizedBox(
                  height: height,
                  child: Container(
                    width: width,
                     height: height,
                    decoration: BoxDecoration(
                        color: color,
                        shape: BoxShape.rectangle,
                        borderRadius: BorderRadius.circular(30.h)
                    ),
                  ),
                ),

                Visibility(
                  visible: hasThumb,
                  child: Positioned(
                    top: -6.h,
                    left: isRtl ? 4.h : null,
                    right: isRtl ? null : 4.h,
                    child: thumb(color),
                  ),
                )
              ],
            ),
          ),
        ),
        SizedBox(width: 8.h)
      ],
    );
  }

  Widget thumb(Color color) {
    return Container(
      width: 18.h,
      height: 18.h,
      padding: EdgeInsets.zero,
      decoration: BoxDecoration(
          color: color,
          shape: BoxShape.circle,
          border: Border.all(color: Colors.white, width: 2.h)
      ),
    );
  }
}