import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:percent_indicator/linear_percent_indicator.dart';
import 'package:wow_english/common/extension/string_extension.dart';

class PracticeHeaderWidget extends StatelessWidget {
  const PracticeHeaderWidget(
      {super.key,
      required this.onTap,
      this.color,
      required this.total,
      this.progress = 0});

  final Function() onTap;

  ///进度条颜色（阶段颜色）
  final Color? color;

  ///进度条总长度
  final int total;

  ///进度条当前长度
  final int progress;

  @override
  Widget build(BuildContext context) {
    return Container(
        color: Colors.transparent,
        height: kToolbarHeight + 3.h,
        child: AppBar(
          backgroundColor: Colors.transparent,
          leading: GestureDetector(
            child: Image.asset(
              'back_around'.assetPng,
              width: 40.w,
              height: 40.h,
            ),
            onTap: () => {onTap()},
          ),
          centerTitle: true,
          title: Container(
            height: 10.h,
            width: 150.w, // 容器宽度
            // padding: EdgeInsets.symmetric(horizontal: 27.w, vertical: 10.h),
            alignment: Alignment.center,
            child: LinearPercentIndicator(
              animation: true,
              lineHeight: 10.h,
              animationDuration: 250,
              animateFromLastPercent: true,
              percent: total > 0 ? progress / total : 0,
              // center: Text('$progress/$total}'),
              barRadius: const Radius.circular(5),
              progressColor: color,
            ),
          ),
        ));
  }
}