import React from 'react';
import {useTranslation} from 'react-i18next';

import {ProgressBar, ProgressBarProps} from '../ProgressBar';

interface Props
  extends Pick<ProgressBarProps, 'title' | 'description' | 'helper' | 'style'> {
  current: number;
  total: number;
}

export function ProgressBarStepper({current, total, ...props}: Props) {
  const {t} = useTranslation();
  const safeCurrent = Math.min(current, total);
  return (
    <ProgressBar
      progress={safeCurrent}
      total={total}
      rightSideText={t('general.step', {value: `${current}/${total}`})}
      {...props}
    />
  );
}
