import React from 'react';
import { Steps } from '@/components/ui';
import { t } from 'i18next';
import useWindowSize from '@/components/ui/hooks/useWindowSize';

const FormStep = ({ currentStep }) => {
  const steps = [
    { label: t('REGISTRATION_INFO'), value: 0 },
    { label: t('USER_INFORMATION'), value: 1 },
  ];
  const confirmSteps = [
    { label: t('VERIFICATION_OTP'), value: 4 },
    { label: t('NEW_PASSWORD'), value: 5 },
  ];

  const { windowWidth } = useWindowSize();
  return (
    <>
      {currentStep < 2 ? (
        <Steps className={windowWidth >= 768 ? '' : 'steps-vertical'} current={currentStep} status={'in-progress'}>
          {steps.map((step) => (
            <Steps.Item key={step.value} title={step.label} className={`mb-8`}></Steps.Item>
          ))}
        </Steps>
      ) : (
        <Steps className="px-2" current={currentStep - 2} status={'in-progress'}>
          {confirmSteps.map((confirmStep) => (
            <Steps.Item key={confirmStep.value} title={confirmStep.label} className={`mb-8`}></Steps.Item>
          ))}
        </Steps>
      )}
    </>
  );
};

export default FormStep;
