import React from "react";

const SubscriptionLayout = ({
  configStep = [],
  currentStep,
  setCurrentStep,
  stepStatus = {},
}) => {
  return (
    <div className="container-fluid stepper-container align-items-start my-4">
      <ul className="timeline-horizontal list-unstyled d-flex justify-content-between align-items-center position-relative w-100 ">
        {configStep.map((step, index) => {
          const stepNumber = index + 1;
          const status = stepStatus[stepNumber] || "pending";

          return (
            <li
              key={step.name}
              className="timeline-item text-center flex-fill position-relative"
            >
              <div
                className={`timeline-point mx-auto mb-2 
                  ${status === "success" ? "completed" : ""}
                  ${status === "failed" ? "failed" : ""}
                  ${stepNumber === currentStep && status === "pending" ? "active" : ""}
                `}
              >
                {status === "failed" ? (
                  <i className="bx bx-x text-white"></i>
                ) : status === "success" ? (
                  <i className="bx bx-check text-white"></i>
                ) : (
                  stepNumber
                )}
              </div>

              <small className="fw-semibold fs-sm-6 fs-md-6 mb-0 text-muted">
                {step.name}
              </small>

              {index !== configStep.length - 1 && (
                <div className={`timeline-line-horizontal`}></div>
              )}
            </li>
          );
        })}
      </ul>

      <div className="step-content mt-4">
        {configStep[currentStep - 1]?.component()}
      </div>
    </div>
  );
};

export default SubscriptionLayout;