import React, { useEffect, useState } from "react";
import style from "./stepper.module.css";

const Stepper = (props) => {
  useEffect(() => {}, []);
  useEffect(() => {
    Object.entries(props.data).forEach(([key]) => {
      console.log("checking", key);
    });
  }, [props.data]);
  return (
    <React.Fragment>
      {Object.keys(props.data).length > 0 && (
        <div
          className={`${style.checkout_stepper_section} ${
            props.customCss && props.customCss
          }`}
        >
          <div className={style.checkout_stepper}>
            {Object.keys(props.data).length > 0 &&
              Object.entries(props.data).map(([key, item]) => (
                <div
                  className={`${style.checkout_stepper_step} ${
                    item.status === "completed" && style.completed
                  } ${item.status === "active" && style.active}`}
                  key={item.title}
                >
                  <div
                    className={`${style.checkout_stepper_svg} ${
                      item.status === "completed" && style.completed
                    } ${item.status === "active" && style.active}`}
                  >
                    {item.icon ? item.icon : item.title}
                  </div>

                  <p className={style.stepper_item_title}>
                    {!item.icon ? "" : item.title}
                  </p>
                </div>
              ))}
          </div>
        </div>
      )}
    </React.Fragment>
  );
};

export default Stepper;
