import 'package:flutter/material.dart';
import 'package:flutter_svg/svg.dart';
import 'package:link/constants.dart';

import '../../utils/size_fit.dart';

class LinkStep extends StatelessWidget {
  int step;
  String content;
  bool hasShadow;
  LinkStep(
      {Key? key,
      required this.step,
      required this.content,
      required this.hasShadow})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    SizeFit.initialize(context);
    if (hasShadow) {
      return Container(
        height: 48.px,
        // padding: EdgeInsets.only(left: 8.px, right: 16.px),
        decoration: BoxDecoration(
            boxShadow: [
              BoxShadow(
                  color: kThemeColor, blurRadius: 0.0, offset: Offset(0, 8.px)),
              BoxShadow(
                  color: const Color(0x66FFF700),
                  blurRadius: 20.px,
                  offset: Offset(0, 14.px))
            ],
            borderRadius: BorderRadius.circular(24.px),
            border: Border.all(color: kThemeColor, width: 4.px)),
        child: Container(
          height: 40.px,
          decoration: BoxDecoration(
              color: Colors.black, borderRadius: BorderRadius.circular(20.px)),
          alignment: Alignment.center,
          child: Row(
            children: [
              SizedBox(
                width: 6.px,
              ),
              Container(
                width: 28.px,
                height: 28.px,
                decoration: BoxDecoration(
                    color: kThemeColor,
                    borderRadius: BorderRadius.circular(14.px)),
                alignment: Alignment.center,
                child: step==-1?SvgPicture.asset('assets/icons/step_checked.svg',width: 20.px,height: 20.px,):Text(
                  step.toString(),
                  style: TextStyle(
                      color: Colors.black,
                      fontFamily: 'Link1',
                      fontWeight: FontWeight.w800,
                      fontSize: 20.px),
                ),
              ),
              SizedBox(
                width: 6.px,
              ),
              Text(
                content,
                style: TextStyle(color: kThemeColor, fontSize: 14.px),
              ),
              SizedBox(
                width: 16.px,
              )
            ],
          ),
        ),
      );
    }

    return Container(
      width: 48.px,
      height: 48.px,
      decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(24.px),
          border: Border.all(color: const Color(0xFF74747A), width: 4.px)),
      child: Container(
        height: 40.px,
        width: 40.px,
        decoration: BoxDecoration(
            color: Colors.black, borderRadius: BorderRadius.circular(20.px)),
        alignment: Alignment.center,
        child: step==-1?SvgPicture.asset('assets/icons/step_checked.svg',width: 30.px,height: 30.px,):Text(
          step.toString(),
          style: TextStyle(
              color: const Color(0xFF74747A),
              fontFamily: 'Link1',
              fontSize: 28.px,
              fontWeight: FontWeight.w800),
        ),
      ),
    );
  }
}