import CardContainer from '@material-hu/components/design-system/CardContainer';
import HuStepper from '@material-hu/components/design-system/Stepper';

import { type ApprovalStepsType } from 'src/types/vacations';
import { useLokaliseTranslation } from 'src/utils/i18n';
import { getActiveStep } from 'src/utils/vacations';

export type ApprovalStepsProps = {
  approvalSteps: ApprovalStepsType;
};

const ApprovalSteps = (props: ApprovalStepsProps) => {
  const { approvalSteps } = props;

  const { t } = useLokaliseTranslation('time_off');
  const activeStep = getActiveStep(approvalSteps);

  return (
    <CardContainer
      color="grey"
      fullWidth
    >
      <HuStepper
        steps={approvalSteps.map(step => ({
          id: step.id.toString(),
          title: t(`general:step_positions.step_${step.position}`),
        }))}
        currentStep={activeStep}
      />
    </CardContainer>
  );
};

export default ApprovalSteps;