import { useLanguage } from "@/app/context/LanguageContext";

interface Props {
  currentStep: number;
}

export default function StepProgress({ currentStep }: Props) {
  const { t } = useLanguage();
  return (
    <div className="px-5 pb-3">
      <div className="step-progress">

        <div className={currentStep >= 1 ? "step active" : "step"} />

        <div className={currentStep >= 2 ? "step active" : "step"} />

        <div className={currentStep >= 3 ? "step active" : "step"} />

      </div>
      <div className="text-center text-white ">
        <h2>{t("auth.registerProgress.heading", "Tell us about yourself")}</h2>
        <p className="terms-text-color">{t("auth.registerProgress.subheading", "Let's start with the basics to personalize your journey.")}</p>
      </div>
    </div>
  );
}