import React, { FC } from "react";
import cx from "classnames";
import styles from "./checkoutPage.module.scss";
import "react-step-progress-bar/styles.css";
import { CheckOutlined } from "@ant-design/icons";
const { ProgressBar,Step } = require("react-step-progress-bar");
// const Step =  Steps.Step;

const CustomProgressBar:FC<any>=(props)=> {
  const { progress } = props;
  return (
    <ProgressBar percent={progress}>
     
      <Step>{({ accomplished, index }: any) => <></>}</Step>
      <Step>
        {({ accomplished, index }: any) => (
          <div className="flex flex-col items-center">
            <div className={styles.stepTitle}>SignIn</div>
            <div
              className={`indexedStep ${accomplished ? "accomplished" : null}`}
            >
              {accomplished ? <CheckOutlined /> : index}
            </div>
          </div>
        )}
      </Step>
      <Step>
        {({ accomplished, index }: any) => (
          <div className="flex flex-col items-center">
            <div className={styles.stepTitle}>Shipping</div>
            <div
              className={`indexedStep ${accomplished ? "accomplished" : null}`}
            >
              {accomplished ? <CheckOutlined /> : index}
            </div>
          </div>
        )}
      </Step>
      <Step>
        {({ accomplished, index }: any) => (
          <div className="flex flex-col items-center">
            <div className={cx("whitespace-nowrap", styles.stepTitle)}>
              Review & Payments
            </div>

            <div
              className={`indexedStep ${accomplished ? "accomplished" : null}`}
            >
              {accomplished ? <CheckOutlined /> : index}
            </div>
          </div>
        )}
      </Step>
      <Step>{({ accomplished, index }: any) => <></>}</Step>
     
    </ProgressBar>
  );
}

export default CustomProgressBar;