import Stack from '@material-hu/mui/Stack';

import Button from '@material-hu/components/design-system/Buttons/Button';

import { useLokaliseTranslation } from 'src/utils/i18n';

type CycleEditActionsProps = {
  showGoBack: boolean;
  onGoBack: () => void;
  onContinue: () => void;
  continueDisabled: boolean;
  continueLabel: string;
};

const CycleEditActions = ({
  showGoBack,
  onGoBack,
  onContinue,
  continueDisabled,
  continueLabel,
}: CycleEditActionsProps) => {
  const { t } = useLokaliseTranslation('forms');

  return (
    <Stack
      sx={{
        backgroundColor: 'background.paper',
        justifyContent: 'flex-end',
        alignItems: 'flex-end',
        flexDirection: 'row',
        position: 'sticky',
        maxWidth: 900,
        zIndex: 10,
        bottom: 0,
        ml: '7%',
        p: 2,
      }}
    >
      {showGoBack && (
        <Button
          onClick={onGoBack}
          sx={{ mr: 'auto' }}
          aria-label={t('GO_BACK')}
        >
          {t('GO_BACK')}
        </Button>
      )}
      <Button
        variant="contained"
        onClick={onContinue}
        disabled={continueDisabled}
        id="continue-stepper-button"
      >
        {continueLabel}
      </Button>
    </Stack>
  );
};

export default CycleEditActions;