import React from "react";
import { Steps } from "antd-mobile";
import styles from "./index.module.scss";

interface StepIndicatorProps {
  currentStep: number;
  steps: { id: number; title: string; subtitle: string }[];
}

const StepIndicator: React.FC<StepIndicatorProps> = ({
  currentStep,
  steps,
}) => {
  return (
    <div className={styles.container}>
      <Steps current={currentStep - 1} className={styles.steps}>
        {steps.map((step) => (
          <Steps.Step
            key={step.id}
            title={step.subtitle}
            className={styles.step}
          />
        ))}
      </Steps>
    </div>
  );
};

export default StepIndicator;
