import React from 'react';
import { CompanyLogo } from '../commons/CompanyLogo';
import { useClassFor, classForComponent } from '../utils/classFor';
import { ModalProgressBar } from '../commons/ModalProgressBar';
import '../styles/base/onboardingModal.sass';
import '../styles/themes/UniLogin/onboardingModalThemeUniLogin.sass';
import { ModalWrapper } from '../Modals/ModalWrapper';
export var OnboardingStepsWrapper = function (_a) {
    var children = _a.children, hideModal = _a.hideModal, message = _a.message, steps = _a.steps, progress = _a.progress;
    return React.createElement(ModalWrapper, { hideModal: hideModal, message: message },
        React.createElement("div", { className: useClassFor('onboarding-modal') },
            React.createElement(CompanyLogo, null),
            React.createElement("div", { className: classForComponent('onboarding-progress-wrapper') },
                React.createElement(ModalProgressBar, { steps: steps, progress: progress })),
            React.createElement("div", { className: classForComponent('onboarding-modal-wrapper') },
                React.createElement("h1", { className: classForComponent('onboarding-modal-title') }, "Create or connect account"),
                React.createElement("p", { className: classForComponent('onboarding-modal-description') }, "Type a nickname to create account or your current username to login."),
                React.createElement("div", { className: classForComponent('onboarding-modal-input-section') },
                    React.createElement("p", { className: classForComponent('onboarding-modal-label') }, "Your nickname:"),
                    children))));
};
//# sourceMappingURL=OnboardingStepsWrapper.js.map