import React from 'react';
import { Confirm, StatusAlertFilled } from '@wix/wix-ui-icons-common';
import { FormFieldErrorSmall } from '@wix/wix-ui-icons-common/system';
import { Type, StepType } from '../constants';
import { st, classes } from './StepMarker.st.css.js';
import { useIcons } from '../../WixDesignSystemIconThemeProvider';
const StepMarker = ({ number, active, type, styleType, hovered, disabled, className, ...otherProps }) => {
    const icons = useIcons('StepMarker', {
        Confirm,
        StatusAlertFilled,
        FormFieldErrorSmall,
    });
    const renderCompleted = () => React.createElement(icons.Confirm, null);
    const renderNumber = () => `${number}${styleType === Type.Text ? '.' : ''}`;
    const renderError = () => styleType === Type.Text ? (React.createElement(icons.StatusAlertFilled, null)) : (React.createElement(icons.FormFieldErrorSmall, { size: "12px" }));
    return (React.createElement("div", { className: st(classes.root, {
            type,
            styleType,
            selected: active,
            hovered,
        }, className) }, type === StepType.Error
        ? renderError()
        : type === StepType.Completed
            ? renderCompleted()
            : renderNumber()));
};
export default StepMarker;
//# sourceMappingURL=StepMarker.js.map