import { _ as __assign } from '../tslib.es6-faad35dc.js';
import { jsxs, jsx } from 'react/jsx-runtime';
import { useState } from 'react';
import MuiBox from '@mui/material/Box';
import Button from '../components/Button.js';
import Typography from '../components/Typography.js';
import LinearProgress from '../components/LinearProgress.js';
import '../clsx.m-6243b874.js';
import '@mui/material/styles';
import '@mui/material/Button';
import '../theme/colors.js';
import '../_commonjsHelpers-1789f0cf.js';
import '@mui/material/Typography';
import '../theme/typography.js';
import '@mui/material/LinearProgress';

var getSteps = function () {
    return ["Stake amount", "Review and sign", "Sign and broadcast", "Tx broadcasted"];
};
var Template = function () {
    var _a = useState(0), activeStep = _a[0], setActiveStep = _a[1];
    var steps = getSteps();
    var handleNext = function () {
        setActiveStep(function (prevActiveStep) { return prevActiveStep + 1; });
    };
    var handleBack = function () {
        setActiveStep(function (prevActiveStep) { return prevActiveStep - 1; });
    };
    return (jsxs(MuiBox, { children: [jsxs(MuiBox, __assign({ display: "flex", justifyContent: "space-between", alignItems: "center", mb: 1 }, { children: [jsx(Typography, __assign({ variant: "title2" }, { children: "Ethereum Staking" }), void 0), jsxs(Typography, __assign({ variant: "title5", color: "secondary" }, { children: [activeStep + 1, "/", steps.length] }), void 0)] }), void 0), jsx(MuiBox, __assign({ mb: 5 }, { children: jsx(LinearProgress, { value: (100 / steps.length) * (activeStep + 1) }, void 0) }), void 0), activeStep !== steps.length && (jsxs(MuiBox, __assign({ display: "flex", gap: 2 }, { children: [jsx(Button, __assign({ color: "secondary", size: "sm", disabled: activeStep === 0, onClick: handleBack }, { children: "Back" }), void 0), jsx(Button, __assign({ color: "primary", size: "sm", variant: "contained", onClick: handleNext }, { children: activeStep === steps.length - 1 ? "Finish" : "Next" }), void 0)] }), void 0))] }, void 0));
};
var Default = Template.bind({});
var LinearProgress_stories = {
    title: "Components/LinearProgress",
    component: LinearProgress
};

export { Default, LinearProgress_stories as default };
