"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.StepIcon = void 0;
var clsx_1 = __importDefault(require("clsx"));
var react_1 = __importDefault(require("react"));
var material_1 = require("@mui/material");
var styles_1 = require("@mui/styles");
var colors_1 = require("../../base/colors");
var useStyles = styles_1.makeStyles({
    root: {
        color: colors_1.grey.standard,
        display: "flex",
        height: 22,
        alignItems: "center",
    },
    active: {
        color: colors_1.green.light,
    },
    bar: {
        width: 56.5,
        height: 5,
        backgroundColor: "currentColor",
    },
    completed: {
        width: 56.5,
        height: 5,
        backgroundColor: "currentColor",
        color: colors_1.green.light,
    },
});
var StepIcon = function (_a) {
    var _b;
    var active = _a.active, completed = _a.completed;
    var classes = useStyles();
    return (react_1.default.createElement(material_1.Box, { className: clsx_1.default(classes.root, (_b = {},
            _b[classes.active] = active,
            _b)) }, completed ? (react_1.default.createElement(material_1.Box, { className: classes.completed })) : (react_1.default.createElement(material_1.Box, { className: classes.bar }))));
};
exports.StepIcon = StepIcon;
//# sourceMappingURL=StepIcon.js.map