import './progress-bar.css';

import useSteps from '../../../hooks/palmistry/use-steps';

type Props = {
  step: number;
};

export default function ProgressBar(props: Props) {
  const steps = useSteps();
  const lastStep = steps.progressBarRange[1];

  const progressPercentage = (props.step / lastStep) * 100;

  const className = ['progress-bar'];

  if (props.step === lastStep) {
    className.push('progress-bar_finish');
  }

  return (
    <div className={className.join(' ')}>
      <div className="progress-bar__current-step">{props.step}/{lastStep}</div>

      <div className="progress-bar__container">
        <div className="progress-bar__filler" style={{ width: `${progressPercentage}%` }}/>
      </div>
    </div>
  );
}
